Question

我有一个jQuery脚本，大部分都运行良好。我有一个链接列表，我点击它来显示/隐藏特定的DIV元素。当我点击链接时，它的CSS被改变了（链接颜色变为红色）。

HTML

<ul style="list-style: none;">
    <li><a href="#" class="review-link" name="review-1">Click to see Review 1</a></li>
    <li><a href="#" class="review-link" name="review-2">Click to see Review 2</a></li>
    <li><a href="#" class="review-link" name="review-3">Click to see Review 3</a></li>
</ul>

的jQuery

$(".review-link").click(function () {
  var divname = this.name;
  $("#"+divname).show("slow").siblings().hide("slow");
  $(this).css("color","red");
  $(this).siblings().css("color","green")
});

我遇到的麻烦是将所有其他链接重置为原始颜色。在我的例子中，我试图将所有其他链接转换为绿色，但我甚至无法使其工作。也许我不理解jQuery中的“sibling”属性？

以下是jsFiddle示例。

Answer 1

在onclick事件中，在您执行任何其他操作之前设置指向该原始颜色的所有链接。

$(document).ready(function(){

    $(".review-link").css("color","green")
    $(".review-link").click(function () {
      var _this=$(this);            
       _this.closest("ul").find(".review-link").css("color","green");
       //your remaining code goes here
    });
});

工作样本http://jsfiddle.net/uCS3P/5/

Answer 2

.review-link元素没有兄弟姐妹。你想要它的父元素的兄弟姐妹。

你可以使用这样的东西......

$(this).parent().siblings().find("a").css("color","green")

Answer 3

$.siblings()查找直接相关的元素。在这种情况下，$(this)指的是被点击的<a>元素，并且由于每个链接都嵌套在<li>标记中，因此它没有直接的兄弟。

$(this).parent().siblings().find('a').css("color","green");

或

$(this).parent().siblings().children('a').css("color","green");

会奏效。

您可能希望使用addClass和removeClass而不是直接使用jQuery更改css，它会使标记和脚本的分离更加完整。

无法访问兄弟<a> elements in unordered list</a>的CSS

3 个答案: