Question

我在循环中有一些div，并希望根据点击的内容更改类。请参阅以下代码：

我的HTML：

<div class="Active"></div>
<div class="inactive"></div>
<div class="inactive"></div>

我的Jquery：

$(document).ready(function()
{
    $('div.inactive').on('click',function()
    {
        //run some codes
        $(this)
            .removeClass('inactive')
            .addClass('Active')
            .closest('div')
            .find('.Active')
            .removeClass('Active')
            .addClass('inactive');
    });
});

具有活动类的div是正在显示的当前选择。这不可点击。带有非活动类的div是可单击的选项。如果用户单击非活动div，则该div的类应更改为活动（这将是显示的新选择），并且具有活动类的前一个div应更改为非活动，从而使其成为可单击的选项。我没有放置CSS代码，因为它是无关紧要的，我想要的是根据点击的选项切换类。

有人可以看看我的代码并告诉我我在哪里失败吗？

Answer 1

$(document).ready(function() {
    $(document).on('click', 'div.inactive', function() {
        //run some codes
        $('.Active').removeClass('Active').addClass('inactive');
        $(this).removeClass('inactive').addClass('Active');
    });
});

这是：http://jsfiddle.net/ZgYyP/

Answer 2

传递给.方法的类名缺少find，closest选择最接近的父元素，您要删除Active类也点击了元素。

$('div.inactive').on('click', function(){
    $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
    });
});

请注意，当您更改类名时，事件处理程序将绑定到所选元素而不是其类名，无论所单击元素的类名如何，都将执行该处理程序。您可以使用事件委派。

$('#aParentElement').on('click', '.Active', function(){
   // Click handler for the Active element
})

$('#aParentElement').on('click', '.inactive', function(){
   // Click handler for the inActive elements
   $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
})

Answer 3

WORKING DEMO

其他答案错过了这一点：“如果用户点击非活动div，则该div的类应更改为活动状态，并且活动类的前一个div应更改为非活动可点击的选项“

您正在尝试控制是否可以通过类名来单击它们，但问题是您绑定点击的元素，div.inactive，不会删除那些类，当该类是已删除，因此您必须在每次点击时检查这一点，并将事件绑定到有效事件。

$('div.inactive, div.Active').on('click',function(){
    if ($(this).hasClass('inactive')){
        //run some codes
        $(this).siblings().andSelf().toggleClass('Active inactive');
    }
});

如何在div中添加和删除类？

3 个答案: