javascript - jQuery更改类不起作用

Question

我尝试使用 JQuery 创建“扩展-取消扩展”功能。当用户单击展开时，会出现 div 的子项。并且当用户单击 unexpand 时，该 div 的子项消失。但它不起作用。

这是我的代码：

$(document).ready(function(){
$('.expand').click(function(){
    var id = $(this).attr('id');

    $(this).html("-");
    $(this).attr("class", "unexpand");

    $.post("classes/ajax_laporan.php",
            {
                id: id
            },
            function(data){
            }
    );
});

$('.unexpand').click(function(){
   $(this).html("+");
   $(this).attr("class", "expand");
});
})

有没有人可以帮我解决这个问题？提前致谢。

Answer 1

我认为您必须像下面这样使用委托，因为class=unexpand加载 DOM 时不存在带有的元素。

$(document).ready(function () {

    $(document).on('click', '.expand', function () {
        var id = $(this).attr('id');
        $(this).html("-");
        $(this).attr("class", "unexpand");
    });

    $(document).on('click', '.unexpand', function () {
        $(this).html("+");
        $(this).attr("class", "expand");
    });
});

小提琴演示