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

时间:2013-11-06 08:36:48

标签: javascript jquery html css

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

5 个答案:

答案 0 :(得分: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');
});

Example fiddle

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

答案 1 :(得分: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/

答案 2 :(得分:2)

怎么样?
$('.lightOn, .lightOff').click(function() {
    $(this).toggleClass('lightOn lightOff');
});

演示:Fiddle

答案 3 :(得分:1)

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

答案 4 :(得分: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/