Функция jQuery .click () с .attr ()

Question

Функция jQuery .click () с .attr ()

0

Я пытаюсь изменить размер div1 с помощью функции щелчка, в зависимости menuright, видна ли в menuright видимость.

Мне нужна помощь с $('a#hidediv').click(function().

Прямо сейчас работает только селектор a#showdiv.

function mySetupFunction() {
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();
    var remaining_width = parseInt($(window).width());

    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);

    $('a#showdiv').click(function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showdiv').attr('id', 'hidediv')
    });

    $('a#hidediv').click(function () {
        $('#menurigth').hide();
        $('#div1').css('width', remaining_width);
        $('a#hidediv').attr('id', 'showdiv')
    });
}

$(document).ready(mySetupFunction);
$(window).resize(mySetupFunction);

user3402695 10 март 2014, в 18:24

Источник

Теги:

jquery

click

attr

3 ответа

0

С учетом ответов Дэвида и Аннопа здесь приведен полный рабочий код:

<script type="text/javascript">

    var remaining_width = parseInt($(window).width());
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();

function mySetupFunction() {
    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);
}

$(document).ready(function () {
    $(document).on('click', 'a#showchat', function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showchat').attr('id', 'hidechat')
    });

    $(document).on('click', 'a#hidechat', function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width);
        $('a#hidechat').attr('id', 'showchat')
    });
    mySetupFunction();
});

$(window).resize(function () { mySetupFunction(); });



</script>

user3402695 11 март 2014, в 11:46

0

Переупорядочивайте такой код,

var remaining_width = parseInt($(window).width());
function mySetupFunction() {
    remaining_width = parseInt($(window).width());
    var one = $('#wrapper_content').width();
    var two = $('#menurigth').width();

    $('#menurigth').hide();
    $('#div1').css('width', remaining_width);
}
$(document).ready(function () {
    $('a#showdiv').click(function () {
        $('#menurigth').animate({ width: 'toggle' });
        $('#div1').css('width', remaining_width - two);
        $('a#showdiv').attr('id', 'hidediv')
    });

    $('a#hidediv').click(function () {
        $('#menurigth').hide();
        $('#div1').css('width', remaining_width);
        $('a#hidediv').attr('id', 'showdiv')
    });
    mySetupFunction();
});

$(window).resize(function () { mySetupFunction(); });

Anoop Joshi 10 март 2014, в 14:37

Ещё вопросы

David · Accepted Answer · 2014-03-10T15-37-00.000Z

Когда вы меняете id на элементе (что, возможно, не очень хорошо, но это не так), вы не меняете обработчики событий, привязанные к нему. Тот же обработчик клика по-прежнему находится в этом элементе.

Вместо привязки к элементам используйте делегирование событий и привязку к общему родительскому элементу. Тогда вам не нужно менять обработчик, потому что личность элемента будет следовать за событием клика. Что-то вроде этого:

$(document).on('click', 'a#showdiv', function () {
    // your code
});

$(document).on('click', 'a#hidediv', function () {
    // your code
});

По мере изменения id любой document времени получает событие click, и он проверяет текущий id элемента, который вызвал событие, поэтому он будет использовать правильный обработчик.

Главное, чтобы узнать здесь, что, хотя код внутри обработчика кликов работает в любое время, когда элемент щелкнут, код, который назначает обработчик кликов ($('something').click(someFunction);) запускается только один раз, когда страница изначально загружается, и он назначает обработчик элементам, которые соответствуют селектору только в это время.