Javascript 。单击“赢”'；当包装在其他div中时，不要单击

这是我正在使用的代码

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

});

当它只是一个人的时候它就工作了，但是当我把它放在我需要的地方，在大约三个div里面它就不工作了，为什么

你可以看到我在这里尝试使用它：

CSS

HTML（尽管隐藏在div中）

{LikeButton color=“grey”size=“20”}

您可能想尝试以下方法：

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

});

---

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

body

的子元素

您是否尝试过使用：

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

---

对此进行修改：

我想您正在寻找这个，请按照下面的链接演示，我已经为您做了一个示例，让您了解并修复您的错误

JS

HTML

---

您能分享受影响部门的HTML和CSS吗？你可以在左边看到我试图改变的核心，我想，在编辑主题模板时，你可能会从TumblrAPI获得一些帮助！我刚试过，但似乎不起作用？也许我的代码中有错误，我会仔细检查主题方面可能缺少一些东西，当然！你应该再看一眼。。

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

});

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

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

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

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