Question

这是我正在使用的代码

$(document).ready(function(){   
$('.likeBtn').click(function() {
    $(this).toggleClass('clicked');
});

});

它只是单独使用但当我把它放在现场时我需要它，在大约三个div中它不再起作用了，为什么？

您可以在此处看到我尝试使用它：http://absdfsderedfdsfrr.tumblr.com/

CSS

.like_button {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
top: 0;
left: 0;
opacity: 0;
}

.like_button iframe {
width: 100%;
height: 100%;
}
ul#meta li.likeBtn {
    display: block;
    width: 21px;
    height: 20px;
    position: relative;
    background: url('http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png');
}
ul#meta li.clicked {
    background: url('http://static.tumblr.com/uiqhh9x/Y36m6h0qu/liked.png')!important;
}

HTML（虽然埋在div中）

<ul id="meta">
<li class="likeBtn">{LikeButton color="grey" size="20"}</li>
</ul>

Answer 1

您可能想尝试一下：

$(document).ready(function(){   
     $('.likeBtn').on('click', function() {
        $(this).toggleClass('clicked');
     });

});

Answer 2

这可能不是问题。作为一个孩子在jQuery中不会引起任何问题，因为即使第一个div元素也是body的孩子。

您是否尝试过使用：

$('.likeBtn').click(function() {
  $(this).attr('class', 'clicked');
});

小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/XupXa/1/

Answer 3

我认为你正在寻找这个，请按照下面的链接演示，我已经为你做了一个例子来了解和修复你的错误

JS

$(document).ready(function(){   
$( ".likeBtn").click(function() {
  $( this ).toggleClass( "clicked" );
});
});

HTML

<ul id="meta">
<li class="likeBtn" >Click to toggle</li>
<li class="likeBtn clicked">clicked</li>
</ul >

CSS

.likeBtn {
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
 background: url('http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png');   

  }
  .blue {
    color: red;
  }
.red {
    color: blue;
  }
  .clicked {
     background: url('http://static.tumblr.com/uiqhh9x/Y36m6h0qu/liked.png')!important;
  }

Demo

包含在其他div中时，.click不会单击

3 个答案: