jquery - 无法访问无序列表中兄弟元素的CSS

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 中的“兄弟”属性？

这是一个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，它使标记和脚本的分离更加完整。