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>

我想点击一个链接按钮，只显示它下面的 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 回答