0

その下にdivを表示するために、サーバーリンクボタンがあります。

<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>

リンクボタンを 1 つクリックして、その下の div 要素のみを表示したい。しかし、私のjsコード:

function showComment(){
                   var isshow=$(this).attr('isshow');
                   if(isshow=="0"){
                       this.$(".comment").show();
                       $(this).attr('isshow',"1");
                   }
                   else{
                       this.$(".comment").hide();
                       $(this).attr("isshow","0");
                   }
               }

これはすべてのdivを表示します。$(this).siblings() または $(this).next() を使用すると、null になりました。なぜそれが機能しないのかわかりません。

私に何ができる？

4

3 に答える 3

5

thisインライン イベントで実行する場合、要素を指していません。次のことを試してください。

onclick="showComment(this)"

と：

           function showComment(el) {
               var isshow=$(el).attr('isshow');
               if(isshow=="0"){
                   $(el).next(".comment").show();
                   $(el).attr('isshow',"1");
               }
               else{
                   $(el).next(".comment").hide();
                   $(el).attr("isshow","0");
               }
           }

または、jQuery の を使用する場合は、 を使用して要素を指すclickことができます。this

$('.btnComment').click(function(event) {
    var isshow=$(this).attr('isshow');
    if(isshow=="0"){
        $(this).next(".comment").show();
        $(this).attr('isshow',"1");
    }
    else{
        $(this).next(".comment").hide();
        $(this).attr("isshow","0");
    }
});
于 2013-08-18T08:51:03.427 に答える
0

より保守しやすいコードを作成するには、 <a>and<div>を別のものにラップする必要があります。<div>このような：

<div class="commentContainer">
  <a class="btnComment" isshow='0'>{{ post_comments.count }} comment</a>
  <div class="comment">
  ....
  </div>
<div>

この親 div は、タグのコンテキストとして機能します。将来、位置を変更した場合、 の<a>後に移動し<div>ても、コードは引き続き正常に動作します。また、コンテナにクラスを割り当てるだけで、グループとしてスタイリングすることも可能です。
あなたのjquery、ここでは代わりにjqueryイベントハンドラーを使用します。

$(".btnComment").click(function () {
    var isshow = $(this).attr('isshow');
    var parent = $(this).closest(".commentContainer");
    if (isshow == "0") {
        parent.find(".comment").show();
        $(this).attr('isshow', "1");
    } else {
        parent.find(".comment").hide();
        $(this).attr("isshow", "0");
    }
}

を使用する.next()と、コードが現在の html に結合されていることを意味します。

于 2013-08-18T08:53:00.220 に答える
0

CSS

.hide{visibility:hidden;} .show{visibility:visible;}

jquery

$('.btnComment').click(function(){
$('.btnComment + div').removeClass('show').addClass('hide'); $(this).next().removeClass(' hide').addClass('show'); });

html

<a class="btnComment" href="javascript:;" sshow='0'>click1</a>
< div class="hide">sandy1</div>
<a class="btnComment" href="javascript:;" isshow='0'>click2</a>
<div class="hide">sandy2</div>
<a class="btnComment" href="javascript:;" isshow='0'>click3</a>
<div class="hide">sandy3</div>

アンカー タグをクリックするたびに、それぞれの div が表示され、その他は非表示になります。これがあなたを助けることを願っています。

于 2013-08-18T09:44:11.620 に答える