如何在单击按钮并添加新类时删除该类

Question

假设有一个div, class为"box"当点击带有button类的按钮时我想删除类"box"并添加一个全新的类"active"下面的jQuery代码是什么?

html

<div class="box">
<button class="button">button</button>
</div>

以及我应该如何在CSS中添加新类?通常我们会加上。

Answer 1

您可以使用removeClass方法删除类，使用addClass方法使用jquery添加类

你也可以将方法链接为:

box.removeClass("box").addClass("active");

const box = $(".box");
$(".button").on("click", function() {
box.removeClass("box");
box.addClass("active");
})

.box {
background-color: red;
}
.active {
background-color: yellowgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>

Answer 2

也许最简单的方法是使用classList.replace方法，您可以使用jQuery和香草JS。

jQuery .

$('.button').click(function () {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
});

.active { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>

香草JS。

const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
}

.active { background: red; }

<div class="box">
<button class="button">button</button>
</div>

Answer 3

最简单的jQuery技术可能是toggle:

$('.button').click(function() {
$(this).parent().toggleClass('box active');
});

.box {
background: #ddd;
}
.active {
background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>