0

这是我正在使用的代码

$(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>
4

3 回答 3

0

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

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

演示

于 2013-10-18T23:34:13.317 回答
0

你可能想试试这个：

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

});
于 2013-10-18T23:05:34.080 回答
0

那可能不是问题。作为一个孩子在 jQuery 中不会导致任何问题，因为即使第一个 div 元素也是body.

您是否尝试过使用：

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

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

于 2013-10-18T23:14:15.157 回答