点击清除数据属性

时间:2018-04-08 20:59:07

标签: javascript jquery clipboard.js

我有一个copies data attribute的函数,并给它一个active类。当点击.copy-btn.close1时,我需要能够从.close2清除有效课程。

$(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>

1 个答案:

答案 0 :(得分:2)

只需使用removeClass()

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