javascript - 多选元素并删除元素和文档单击中的属性？

Question

我有一个条件，我必须多选元素并在选择它们时更改那里的颜色。我想删除文档点击和元素点击时的颜色，所以当点击文档时，无论选择什么颜色都会回到原来的颜色。现在我只能在使用 ToggleClass 的元素上实现这一点。到目前为止，这是我尝试过的。

$('.Current').click(function() {
  $(this).toggleClass('selected');

});

a:visited,
a:focus {
  color: #000
}

a {
  text-decoration: none
}

.Current {
  width: 100%;
  background: #7bd4ff;
  border: 2px solid #444;
  text-align: center;
  margin-bottom: 5px;
  padding: 5px 0;
}

.Current.selected {
  background: #ffadc9
}

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

<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>

我也想删除文档点击时元素的颜色。提前致谢!

Answer 1

至少有两种方法:

使用另一个点击处理程序

你需要:

1. 通过 stopPropagation 防止 .Current 元素中的点击冒泡。

2. 将点击处理程序添加到清除类的 document，例如$(文档).on("点击", ...)

3. 确保有部分文档可供点击(可能是通过使 body 扩展视口(viewport)的整个高度(html, body { height: 100% } }).

例子:

$('.Current').click(function(e) {   // Note `e`
  $(this).toggleClass('selected');
  e.stopPropagation();
});
$(document).on("click", function() {
  $(".selected.Current").removeClass("selected");
});

a:visited,
a:focus {
  color: #000
}

a {
  text-decoration: none
}

.Current {
  width: 100%;
  background: #7bd4ff;
  border: 2px solid #444;
  text-align: center;
  margin-bottom: 5px;
  padding: 5px 0;
}

.Current.selected {
  background: #ffadc9
}

body, html {
  height: 100%;
}

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

<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>

使用单个文档级点击处理程序

如果愿意，您可以将两个点击处理程序的操作合并为一个，方法是检查点击是否在到达 document 之前经过 .Current。但这有一个问题，如果点击是由前往 document 的其他元素处理的，它可能会产生您不希望的副作用。

例子:

$('.Current').click(function(e) {   // Note `e`
  $(this).toggleClass('selected');
  e.stopPropagation();
});
$(document).on("click", function(e) {
  var current = $(e.target).closest(".Current");
  if (current[0]) {
      current.toggleClass("selected");
  } else {
      $(".selected.Current").removeClass("selected");
  }
});

a:visited,
a:focus {
  color: #000
}

a {
  text-decoration: none
}

.Current {
  width: 100%;
  background: #7bd4ff;
  border: 2px solid #444;
  text-align: center;
  margin-bottom: 5px;
  padding: 5px 0;
}

.Current.selected {
  background: #ffadc9
}

body, html {
  height: 100%;
}

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

<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>
<div class="Current"><a href="#">Click Event Color Change</a></div>