Question

我还是Jquery / Javascript的新手，所以我很难理解如何实现以下内容。

基本上我在网站范围内使用相同的按钮类，我试图让Jquery将“点击”类提供给仅被点击的按钮，而不是其他按钮。

这就是我所拥有的......

$(".button-img").click(function()  {
    var clickedButton = $(this);
    if clickedButton.hasClass('clicked') {
        return false;
    }
    clickedButton.addClass('clicked');
});

我想要做的就是在这个小提琴中更好地解释 - http://jsfiddle.net/biggee/FQqL8/1/

我知道我在做什么是错的，虽然我认为我是在正确的方面，但在阅读了一大堆教程后我仍然没有得到它。任何帮助都会非常感激。

Answer 1

的 jsFiddle Demo 的

请记住始终检查控制台是否有错误。

Uncaught SyntaxError: Unexpected identifier

这里缺少括号：

if clickedButton.hasClass('clicked') {

应该是

if (clickedButton.hasClass('clicked')) {

Answer 2

卫生署！

回答了我自己的问题..

我从先前的尝试方法中设置了错误的css类。

之前...

.button-img .clicked {background-position:0px -60px;}

现在......（和工作）

.clicked {background-position:0px -60px;}

谢谢你们;）

Answer 3

首先，你的代码中有一个解析错误：

if clickedButton.hasClass('clicked') {

缺少必需的括号：

if (clickedButton.hasClass('clicked')) {

其次，你的CSS也是错的：

.button-img .clicked {
    background-position:0px -60px;
}

匹配 clicked内的.button-img 类元素;你可能的意思是：

.button-img.clicked { background-position:0px -60px; }

如果.button-img元素也具有clicked类，则匹配$(".button-img").on('click', function() { $(this).addClass('clicked'); });元素。

最后，为了让您的代码更加轻松：

{{1}}

带有重复按钮元素的JQuery addClass / hasClass

3 个答案: