jQuery单击功能与if / else间歇性地工作

Question

构建一个单击的购物清单应用程序，然后将指定的项目划掉。如果再次单击该项，则应将其恢复到其原始状态。我有一个if / else语句来检查是否已经应用了“ixtem”类。出于某种原因，如果列表中有多个项目，if / else语句会运行几次，即使我使用了$（this）选择器：

$('.crossout').click(function() {

    if ($(this).closest('.newitem').hasClass('xitem')) {
        $(this).closest('.newitem').removeClass('xitem');
        console.log('remove x');
    }

    else {
        $(this).closest('.newitem').addClass('xitem');
        console.log('x out');   
    }

})

Answer 1

试试这个：

$( document ).ready(function() {
    $('li').each(function(i) {
        $(this).click(function() {
            $(this).toggleClass('crossOut');
        });
    });
});

在这里摆弄：http://jsfiddle.net/ackerman/nF4Jd/