Question

所以我现在正在学习一些jQuery，并且有点坚持使用这个.click函数。我试图“打开和关闭灯”，可以这么说。我能够这样做，但只有一次。为什么这样，我的代码只运行每个项目的一次点击事件，我应该如何改进它？

链接到我的JSfiddle。

HTML

<div class="lightOn"></div>
<div class="lightOff"></div>

的jQuery

$('.lightOn').click(function() {
    $(this).removeClass('lightOn');
    $(this).addClass('lightOff');
});
$('.lightOff').click(function() {
    $(this).removeClass('lightOff');
    $(this).addClass('lightOn');
});

CSS

.lightOn {
    height: 90px;
    width:90px;
    background-color:yellow;
    border-radius: 100%;
    float:left;
    margin:10px;
}
.lightOff {
    height: 90px;
    width:90px;
    background-color:grey;
    border-radius: 100%;
    float:left;
    margin:10px;
}

Answer 1

问题是因为您要删除所选择的类，因此对于连续单击，该元素不再存在。而是保留了一个共同的class，但添加一个以点亮该对象。试试这个：

<div class="light"></div>
<div class="light"></div>

.light.on {
    background-color:yellow;
}
.light {
    height: 90px;
    width:90px;
    background-color:grey;
    border-radius: 100%;
    float:left;
    margin:10px;
}

$('.light').click(function() {
    $(this).toggleClass('on');
});

Example fiddle

此方法的好处是能够处理x个.light个元素，而无需修改您使用的jQuery选择器。

Answer 2

问题在于您将函数绑定到元素，而不是绑定到选择器。也就是说，绑定一个将类lightOn移除到最初具有该类的元素的函数。该函数只删除lightOn类并添加lightOff类，即使已经执行过一次。

有两种方法可以解决这个问题。一个是on和事件委托，它允许你做一些类似于绑定到选择器的事情。它将处理程序附加到父元素，并利用所有祖先元素被通知源自其后代的事件的事实。因此函数可能绑定到document.body，但只有源自匹配.lightOn选择器的元素的元素才会触发处理程序：

$(document.body).on('click', '.lightOn', function() {
    $(this).removeClass('lightOn').addClass('lightOff');
}).on('click', '.lightOff', function() {
    $(this).removeClass('lightOff').addClass('lightOn');
});

http://jsfiddle.net/lonesomeday/C6f7u/5/

然而，更好的是使用jQuery的toggleClass函数，如果元素当前具有它们，则删除类，如果它没有，则添加它们。

$('.lightOn,.lightOff').click(function() {
    $(this).toggleClass('lightOn lightOff');
});

http://jsfiddle.net/lonesomeday/C6f7u/2/

Answer 3

怎么样？

$('.lightOn, .lightOff').click(function() {
    $(this).toggleClass('lightOn lightOff');
});

演示：Fiddle

Answer 4

您可以尝试使用toclass of jquery http://api.jquery.com/toggleClass/

Answer 5

将事件附加到父元素是一种很好的做法。在您的情况下，这甚至是强制性的，因为您正在更改在事件绑定期间使用的类。那么，你的HTML：

<div class="ligths">
    <div class="lightOn"></div>
    <div class="lightOff"></div>
</div>

JS：

$(".ligths").on("click", "div", function(e) {
    var el = $(this);
    if(el.hasClass("lightOn")) {
        el.removeClass("lightOn").addClass("lightOff");
    } else {
        el.removeClass("lightOff").addClass("lightOn");
    }
});

JSFiddle：http://jsfiddle.net/C6f7u/7/

我该如何改进我的jQuery点击功能？

5 个答案: