jQuery通过CSS类在2种颜色之间切换

debugcn 发表于 Dev

MarajdákMarek

如果我单击它，则需要按元素上的css类在2个图标（在本示例中为颜色）之间切换。我有此代码（无法正常工作）：

$( ".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');
});

.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>

格雷格·伯格哈特（Greg Burghardt）

您似乎在将事件委托与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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。