Question

我有一组三个<div>元素，其中一个是＆＃34;选择＆＃34;在页面加载（给它一个不同的彩色边框）。我试图让它如果单击同一个类的不同<div>，那个特定的一个接收新的边框颜色，而另外两个恢复到它们的默认灰色边框。

我的JS就像这样：

  $('.container').click(function(){
    $(this).css('border','2px solid #ffffff');
    $(this).siblings().css('border','2px solid #e3e3e3');
  });

我也尝试使用.not()，但代码的结果与预期不符。

此处简化HTML：

<div class="container">Some Content</div>
<div class="container">Some Content</div>
<div class="container">Some Content</div>

第一行有效，但第二行没有为元素的兄弟姐妹提供不同的边框颜色。我在网上看过，但没有解决方案能满足我的需求。有什么帮助吗？

Answer 1

这非常简单，只要它们都是同一个类，就不需要元素的任何特定层次结构。

只需为该类设置默认样式，并添加一个事件处理程序，将所有div重置为normal，但只是将其单击为special。

$('.normalDiv').click(function(){
   // First set all div elements back to normal
   $('.normalDiv').removeClass("activeDiv");

   // Then, apply the special class to the clicked div
   $(this).addClass("activeDiv");
});

.normalDiv { background-color:#e0e0e0; width:100px;margin:5px; }
.activeDiv { border:1px solid black; background-color:aliceblue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="normalDiv">content</div>
  <div>
    <div class="normalDiv">content</div>
    <div class="normalDiv">content</div>
  </div>
</div>

Answer 2

从评论中你说这些元素不是兄弟姐妹，而是父母。因此，在这种情况下，您需要选择父级而不是兄弟级，并重新选择容器。

＆＃13;

  $('.container').click(function(){
    $(this)
        .css('border','2px solid #ffffff')
        .parent()
           .siblings()
             .find(".container")
               .css('border','2px solid #e3e3e3');
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>

＆＃13;

最后真的很奇怪...其他方法是只选择元素，并在活动的那个上设置一个类。

＆＃13;

var containers = $('.container');
containers.click(function(){
  containers.removeClass("active");
  $(this).addClass("active");
  // If you want to toggle on and off the one that is selected
  // containers.not(this).removeClass("active");
  // $(this).toggleClass("active");

});

＆＃13;

.container { border: 2px solid #e3e3e3;}
.container.active {  border-color: #ffffff; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>
<div><div class="container">Some Content</div></div>

＆＃13;

对所选元素执行函数，对同一类的所有其他元素执行不同的函数？

2 个答案: