Question

我有4个按钮，类为active，现在我想删除所有这些类，然后只添加1个类到我点击的那个。

<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

这是我到目前为止编写的代码：

let buttonOptions = document.querySelectorAll(".btn");
for (let i=0; i< buttonOptions.length; i++) {
    buttonOptions.addEventListener('click', function() {
        buttonOptions[i].classList.add("active");
    });   
}

但我不知道应该如何删除这些active课程。而且我想知道有一种方法可以避免专门用for去除类？

Answer 1

你可以避免使用for循环，但你仍然需要迭代，所以毫无意义。我将使用forEach支持querySelector并且看起来更清晰，但for循环也很好

对于绑定事件处理程序也是如此，您必须迭代并定位每个元素

let buttonOptions = document.querySelectorAll(".btn");

buttonOptions.forEach( el => 
    el.addEventListener('click', function() {
        buttonOptions.forEach( els => els.classList.remove('active') )
        this.classList.add("active");
    })
)

.active {color : red}

<button class="active btn">btn1</button>
<button class="btn">btn2</button>
<button class="btn">btn3</button>
<button class="btn">btn4</button>

Answer 2

＆＃13;

var buttons = document.getElementsByClassName("btn");

function removeAllActive() {
  [].forEach.call(buttons, function(el) {
    el.classList.remove("active");
  });
}

removeAllActive();

[].forEach.call(buttons, function(el) {
  el.addEventListener("click", function() {
    removeAllActive();
    el.classList.add("active");
  });
});

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

＆＃13;

Answer 3

document.getElementById('buttons').addEventListener('click', function(evt) {
  if (evt.target.classList.contains('btn')) {
    Array.from(document.querySelectorAll('.btn', this)).forEach(x => {
      x.classList.toggle('active', x == evt.target)
    });
  }
});

.active {
  color: red;
}

<div id="buttons">
  <button class="active btn">btn1</button>
  <button class="btn">btn2</button>
  <button class="btn">btn3</button>
  <button class="btn">btn4</button>
</div>

为每个按钮附加一个监听器是浪费的。我将一个监听器附加到一个包含元素，然后等待事件冒泡到它。如果点击源自其中一个btn - 分类的元素，那么我会在其中找到所有btn - 分类的元素，并根据它们是单击的按钮还是切换active类。不

Answer 4

以下是解决上述问题的最简单方法，

with ACTION_T as
(
select a1.*, 
       row_number() over(partition by incidentid 
                         order by coalesce(completed,
                                           getdate())) as a_ord  -- Using a getdate() to handle nulls
from action a1
)
select completed,
       case when a_ord = 1 then 'true' else 'false' end as completed_first,
       actionid,
       incidentid
from ACTION_T

Answer 5

如果您被允许使用jquery，那么对您来说会更容易。请看下面的代码，它可能对你有所帮助

<script>
$( document ).ready(function() {
    $('.btn').removeClass('active');
	$('.btn').click(function(e) {
		$('.btn').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

Answer 6

试试这个：

$(document).on("click",".btn",function(){
   $(".btn").removeClass("active");
   $(this).addClass("active");
});

从javascript中的几个元素中删除相同的类

6 个答案: