3

所以我现在正在学习一些 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;
}
4

5 回答 5

7

问题是因为您正在删除您选择的类，因此对于连续单击该元素不再存在。取而代之的是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');
});

示例小提琴

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

于 2013-11-06T08:41:32.447 回答
4

问题是您将函数绑定到元素，而不是选择器。也就是说，您将一个删除该类的函数绑定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/

于 2013-11-06T08:40:51.473 回答
2

关于什么

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

演示：小提琴

于 2013-11-06T08:39:05.087 回答
1

您可以尝试使用 jquery http://api.jquery.com/toggleClass/的工具类

于 2013-11-06T08:39:31.777 回答
0

将事件附加到父元素是一个很好的做法。在您的情况下，这甚至是强制性的，因为您正在更改在事件绑定期间使用的类。所以，你的 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/

于 2013-11-06T08:48:02.520 回答