0

我在一个循环中有一些 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 代码，因为它无关紧要，我想要的只是根据单击的选项切换类。

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

4

3 回答 3

0 
$(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/

于 2013-03-14T02:38:00.127 回答
0

您缺少.传递给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');
})
于 2013-03-14T02:38:06.750 回答
0

工作演示

其他答案错过了这一点：“如果用户单击非活动 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');
    }
});
于 2013-03-14T02:38:18.527 回答