单击清除数据属性

Question

我有一个函数 copies data attribute 并给它一个 active class。单击 .close1 或 .close2 时，我需要能够从 .copy-btn 中清除活动的 class。

$(document).ready(function() {
  $(".copy-btn").click(function(event) {
    event.preventDefault();
  });
});
var clip = new Clipboard(".copy-btn");
$(".copy-btn").click(function(e) {
  $.each($(".copy-btn"), function(index, value) {
    if (
      $(value).attr("data-text") ==
      $(e.target).attr("data-text")
    ) {
      $(value).addClass("active");
    }
  });
});

.btn {
  width: 50px;
  height: 20px;
  border: 2px solid;
  cursor: pointer;
}

.copy-btn {
  outline: none;
  cursor: pointer;
  border: none;
  background-color: white;
  font-size: 21px;
}

.active {
  border-bottom: 3px dotted green;
  padding-bottom: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="copy-btn" data-text="CODE1">CODE1</p>
<p class="copy-btn" data-text="CODE2">CODE2</p>
<p class="copy-btn" data-text="CODE3">CODE3</p>
<div class="btn close1">Close 1</div>
<div class="btn close2">Close 2</div>

Answer 1

只需使用 removeClass()

$('.close1, .close2').on('click', function() {
    $('.copy-btn').removeClass('active');
})

单击清除数据属性

Clear data attribute on click

javascript

jquery

clipboard.js