javascript click div 仅当它是某个类时才添加边框

Question

单击时如何使用 javascript/jquery 向 div 添加边框？当用户选择/单击它时，我需要一个在每一行中都有列类的 div 以具有边框。但一次只能选择每行一列 div，因此一次只有一个带有类列的 div 可以用边框“突出显示”。但每一行都会有一个带边框的div。希望这是有道理的。基本上 html 的结构是这样的...

<div class="row">
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
</div>

<div class="row">
 <div class="column"></div>
 <div class="column"></div>
 <div class="column"></div>
</div>

显然，我不擅长 js 和 jquery。 提前谢谢大家。

Answer 1

向每个 列 添加一个 click 处理程序，向被单击的列添加一个类，并从所有兄弟项中删除该类:

$('.column').on('click', function() {
   $(this).addClass('highlight').siblings().removeClass('highlight'); 
});

Fiddle