Question

如果点击它，我需要通过元素上的css类在两个图标之间切换（在此示例中为颜色）。我有这个代码（不能正常工作）：

＆＃13;

$( ".play" ).on('click', function(event) {
    event.preventDefault();


    $(this).removeClass('play');
    $(this).addClass('stop');

    console.log('play');
});

$( ".stop" ).on('click', function(event) {
    event.preventDefault();


    alert();

    $(this).removeClass('stop');
    $(this).addClass('play');

    console.log('stop');
});

＆＃13;

.play {
    background-color: black;
}

.stop {
    background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="play" style="width:100px; height: 100px; display: block;"></a>

＆＃13;

Answer 1

$( "a" ).on('click', function(event) {
    event.preventDefault();

    var anchor = $(this);

    if(anchor.hasClass('play'))
    {
        $(this).removeClass('play');
        $(this).addClass('stop');

        console.log('play');
    }
    else
    {
    alert();

    $(this).removeClass('stop');
    $(this).addClass('play');

    }
});

.play {
    background-color: black;
}

.stop {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="play" style="width:100px; height: 100px; display: block;"></a>

Answer 2

您似乎正在使用jQuery的事件委派，但我认为您可能会有一点错误：

$("body")
    .on("click", ".play", function(event) {
        // change "play" to "stop"
    })
    .on("click", ".stop", function(event) {
        // change "stop" to "play"
    });

您希望将click处理程序附加到<body>标记，然后为jQuery提供事件名称，CSS选择器和事件处理程序。

参考：http://api.jquery.com/on/

Answer 3

不要将事件处理程序绑定到类，将其绑定到元素的id。然后你可以看到元素有什么类并在它们之间切换。

Here is a working codepen

HTML：

<a href="#" id="clickable" class="play" style="width:100px; height: 100px; display: block;"></a>

CSS：不会改变

JS：

$( "#clickable" ).on('click', function(event) {
  if($(this).hasClass('play')) {
    $(this).removeClass('play');
    $(this).addClass('stop');
  } else {
    $(this).removeClass('stop');
    $(this).addClass('play');
  }
});

Answer 4

一样容易.....

＆＃13;

$( "a" ).on('click', function(event) {
    event.preventDefault();
    $(this).toggleClass('stop');
    $(this).toggleClass('play');
});

＆＃13;

.play {
    background-color: black;
}

.stop {
    background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="play" style="width:100px; height: 100px; display: block;"></a>

＆＃13;

Answer 5

或者您也可以这样做： -
的CSS：

    .play {
        background-color: black;
    }

    .stop {
        background-color: green;
    }

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".play").on('click', function(event) {
            if ($('a').hasClass('stop')) {
                $(".play").addClass("play").removeClass("stop");
            } else {
                $(".play").addClass("stop");
            }
            console.log('play');
        });
    });
</script>

<a href="#" class="play" style="width:100px; height: 100px; display: block;"></a>

html和css保持不变。

Jquery在css类之间切换2种颜色

5 个答案: