点击时清除数据属性

Question

我有一个copies data attribute并为其提供active类的函数。 单击.close1或.close2时，我需要能够从.copy-btn清除活动类。

 $(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');
})