javascript - 多选择元素并删除元素内的属性，然后单击文档？

我有一个条件，必须多选元素并在选择它们时在其中更改颜色。
我想删除文档单击和元素单击上的颜色，因此，在文档上单击时，无论选择什么颜色，该颜色都会恢复为原始颜色。现在，我只能使用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>

我也想删除文档单击元素的颜色。
提前致谢！

最佳答案

至少有两种方法可以做到：

与另一个点击处理程序

您需要：


防止通过.Current从您的stopPropagation元素中冒泡。
在document中添加一个点击处理程序，以清除该类，例如$(document).on("click", ...)
确保文档的一部分可供单击（可能是通过使body扩展视口的整个高度（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>

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

您可以根据需要将两个点击处理程序的操作组合为一个，方法是检查点击是否在到达.Current之前经过document。但这是一个问题，如果单击是在到达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>