0

これが私が使用しているコードです

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

});

単独では機能しますが、必要な場所に配置すると、約 3 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

それは問題ではないかもしれません。最初の div 要素でさえ の子であるため、子であっても jQuery で問題は発生しませんbody。

使用してみましたか:

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

これをいじる: http://jsfiddle.net/afzaal_ahmad_zeeshan/XupXa/1/

于 2013-10-18T23:14:15.157 に答える
0

これを試してみてください：

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

});
于 2013-10-18T23:05:34.080 に答える
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 に答える