javascript - 对选定的元素执行一个函数，并对同一类的所有其他元素执行不同的函数？

Question

我有一套三个 <div>元素，其中一个在页面加载时被“选择”(为其提供不同颜色的边框)。我试图让它成为一个不同的 <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 重置为正常状态，但仅将单击的 div 重置为特殊状态。

$('.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>