Question

我尝试使用点击功能调整div1的大小，具体取决于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);

Answer 1

重新排列这样的代码，

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(); });

Answer 2

当您更改元素上的id时（无论如何这可能不是一件好事，但这不是重点），您不会更改绑定到它的事件处理程序。相同的点击处理程序仍在该元素上。

使用事件委派并绑定到公共父级，而不是绑定到元素。然后您不需要更改处理程序，因为元素的标识将遵循单击事件。像这样：

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

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

随着id的更改，任何时候document收到点击事件，它都会检查调用该事件的元素的当前 id，因此它将使用正确的处理程序。

这里要学习的主要内容是，当里面的时，点击处理程序会在点击元素的任何时候运行，而分配点击处理程序的代码（{{ 1}}）在页面最初加载时仅运行一次，并且它将处理程序分配给仅与当时选择器匹配的元素。

Answer 3

大卫和安诺普的回答都是完整的代码：

<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>

带.attr（）的jQuery .click（）函数

3 个答案: