如何通过javascript点击后添加CSS，如果没有点击则将其删除

Question

我遇到了一个javascript点击更改CSS的问题！

我希望点击后可以加粗点击选项的外框和文本，但没有选择的不要加粗！我我尝试了几种写作方式，但我仍然不知道如何完成这个要求，我希望得到大家的帮助，谢谢。

let plan = document.querySelector('.plan');
let price = document.querySelector('.price');
let item = document.querySelectorAll('.item');

for (var i = 0; i < item.length; i++) {
item[i].addEventListener('click', showplan, false);
}
function showplan(e) {
//Originally intended to increase this way, but it seems that it can't be written like this
// e.target.closesst('li').classList.add('bold')
// e.target.closesst('h2').classList.add('bold')
const planSelected = e.target.closest('li').querySelector('h2');
const priceSelected = e.target.closest('li').querySelector('p');
plan.textContent = planSelected.textContent;
price.textContent = priceSelected.textContent;
}

@charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover {
border: 1px solid #222;
}
.show {
border: 2px solid blue;
padding: 20px;
}
.bold {
border: 3px solid;
font-weight: 900;
}

<ul class="product＿list">
<li class="item">
<h2>coke</h2>
<p>$100</p>
</li>
<li class="item">
<h2>beef</h2>
<p>$600</p>
</li>
</ul>
<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

Answer 1

您需要切换类，您可以通过从每个项目中删除它并仅将其设置为选定的项目来实现这一点：

item.forEach(el => el.classList.remove('active'))
e.currentTarget.classList.add('active')

还有一个CSS的特殊性问题：

当仅使用.bold时，border将被.product＿list .item覆盖

注意，尝试使用currentTarget

const plan = document.querySelector('.plan');
const price = document.querySelector('.price');
const item = document.querySelectorAll('.item');
function showplan(e) {
const target = e.currentTarget;
const closestLi = target.closest('li');
const planSelected = closestLi.querySelector('h2');
const priceSelected = closestLi.querySelector('p');
item.forEach(el => el.classList.remove('active'))
target.classList.add('active')
plan.textContent = planSelected.textContent;
price.textContent = priceSelected.textContent;
}
item.forEach(el => el.addEventListener('click', showplan));

@charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover,
{
border: 1px solid #222;
}
.product＿list .active {
border: 3px solid red;
font-weight: 900;
color: red;
}
.show {
border: 2px solid blue;
padding: 20px;
}

<ul class="product＿list">
<li class="item">
<h2>coke</h2>
<p>$100</p>
</li>
<li class="item">
<h2>beef</h2>
<p>$600</p>
</li>
</ul>
<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

Answer 2

如何在点击javascript后添加CSS，如果没有点击则将其删除？

假设我们有一个类"；项目"；，我们想要改变"；h1"；

add class:
e.currentTarget.classList.add('item')
remove class:
e.currentTarget.classList.remove('item')
toggle class:
e.currentTarget.classList.toggle('item')

切换意味着：(如果h1有这个类，则删除，如果没有，则添加(

Answer 3

使用jQuery，两个:radio及其对应的labels:

var $plan = $('.plan');
var $price = $('.price');
var $item = $('.item');
$('.item').on('click', showplan);
function showplan(e) {
const plan = $(this).find('h2').text();
const price = $(this).find('p').text();

$plan.text(plan);
$price.text(price);
}

@charset "UTF-8";
.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
cursor: pointer;
}
.product＿list input {
display: none;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover {
border: 1px solid #222;
}
.show {
border: 2px solid blue;
padding: 20px;
}
.product＿list input:checked + label {
outline: 2px solid black; /* Prevent jumping. */
border: 1px solid black;
font-weight: 900;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product＿list">
<input type="radio" name="product" id="coke">
<label class="item" for="coke">
<h2>coke</h2>
<p>$100</p>
</label>
<input type="radio" name="product" id="beef">
<label class="item" for="beef">
<h2>beef</h2>
<p>$600</p>
</label>
</div>
<h2 class="show">Your food of choice is <span class="plan">?</span>. The total price is <span class="price">?</span>.</h2>