Question

我有serval链接按钮，以显示它下方的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>

我想克隆一个linkbutton，只显示它下面的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，我不知道为什么不起作用。

我该怎么办？

Answer 1

如果在内联事件中运行它，

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

Answer 2

您应该将<a>和<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。

Answer 3

css

.hide {能见度：隐藏;} .show {能见度：可见;}

jquery的

$（ 'btnComment'）。点击（函数（）{
$（'。btnComment + div'）。removeClass（'show'）。addClass（'hide'）; $（本）。接下来（）removeClass（ '隐藏'）addClass（ '显示'）。; }）;

HTML

＆lt; a class =“btnComment”href =“javascript：;”   sshow ='0'＆gt; click1＆lt; / a＆gt;
＆lt; DIV   class =“hide”＆gt; sandy1＆lt; / div＆gt;
＆lt; a class =“btnComment”   HREF = “JavaScript的:;” isshow ='0'＆gt; click2＆lt; / a＆gt;
＆lt; div   class =“hide”＆gt; sandy2＆lt; / div＆gt;
＆lt; a class =“btnComment”   HREF = “JavaScript的:;” isshow ='0'＆gt; click3＆lt; / a＆gt;
＆lt; div   类= “隐藏” ＆GT; sandy3＆LT; / DIV＆GT;

每次点击锚标记时，都会显示相应的div，其他div将被隐藏。希望这会帮助你。

单击链接时如何选择兄弟元素？

3 个答案: