如何在使用jQuery单击时突出显示div？

Question

我有一堆类tl-box

的div

我想突出显示我点击的那个。

注意： 如果我点击一个新的div，只，应该突出显示新的div。

---

我试过了：

jQuery

$('.tl-box').click(function () {
  $(this).find('.tl-selected').removeClass('tl-selected');
  $(this).toggleClass('tl-selected');
});

CSS

.tl-selected{
    background: white;
    border:3px solid orange;
    width:179px;
    height:80px;
    position: relative;
}

结果

实现这样的目标的最佳方式是什么？

Fiddle

Answer 1

你不会在另一个框内找到所选框，但你在$(this)内搜索...

只需这样搜索：

$(function() {
  $('.tl-box').click(function() {
    $('.tl-selected').removeClass('tl-selected');
    $(this).addClass('tl-selected');
  });
});

.tl-box {
  width: 100px;
  height: 50px;
  margin: 20px;
  display: inline-block;
  border: 2px solid black;
  box-sizing: border-box;
}
.tl-selected {
  background: white;
  border: 3px solid orange;
  position: relative;
}

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

Answer 2

更改

$('.tl-box').click(function () {
  $(this).find('.tl-selected').removeClass('tl-selected');
  $(this).toggleClass('tl-selected');
});

到

$('.tl-box').click(function () {
  $('.tl-selected').removeClass('tl-selected');
  $(this).toggleClass('tl-selected');
});

Answer 3

在第一个代码段中，this引用所点击的项目;所以你不会通过在里面搜索找到以前突出显示的项目。尝试替换它：

$(this).find('.tl-selected').removeClass('tl-selected');

用这个：

$('.tl-selected').removeClass('tl-selected');