Question

jquery的：

$('#toggle').on('click', function() {
    if ($(this).attr('class') == 'play')
        $(this).attr('class', 'pause');
    else
        $(this).attr('class', 'play');
});

$('.play').on('click',function(){
    $('div').css({'background':'blue'}); 
});

$('.pause').on('click',function(){
    $('div').css({'background':'green'}); 
});

demo

它只改变div颜色一次。有什么不对吗？

Answer 1

在注册事件时，不可能拥有您指定的所有类，因为您是在运行时添加这些类。因此，您必须使用event-delegation为click或其document的类隐藏nearest parent事件处理程序。

尝试，

$(document).on('click','.play',function(){
    $('div').css({'background':'blue'}); 
});

$(document).on('click','.pause',function(){
    $('div').css({'background':'green'}); 
});

DEMO

Answer 2

首先，您需要为动态添加的元素委派您的事件（因为您在此处修改类）...使用on 将其委托给文档中存在的最接近的静态父元素，而不是记录本身以获得更好的性能 ......

并且您不需要为id选择器单独点击事件..您可以在各自的点击事件中添加和删除相应的类

试试这个

$(document).on('click','.play',function(){
  $(this).removeClass('play').addClass('pause');
  $('div').css({'background':'blue'}); 
});

$(document).on('click','.pause',function(){
   $(this).removeClass('pause').addClass('play');
  $('div').css({'background':'green'}); 
});

fiddle here

Answer 3

检查更新后的小提琴：http://jsfiddle.net/eQdgk/1/

我已将您的javascript更改为：

$(document).on('click', '#toggle', function(){

    if($(this).hasClass('play')){
        $(this).removeClass('play').addClass('pause');   
        $('div').css({'background':'blue'}); 
    }else{
        $(this).removeClass('pause').addClass('play');    
        $('div').css({'background':'green'}); 
    }

});

Answer 4

使用以下代码

HTML

<span id="toggle" >toggle</span>
<div id='box' class="play"></div>

CSS

div{
    width: 200px;
    height: 200px;
    background: green;
}

.play{
  background:blue
}
.stop{
  background:green
}

jQuery

$('#toggle').on('click', function() {
    $('#box').toggleClass('stop');
});

播放暂停按钮不能正常工作

4 个答案:

DEMO