I have encountered a problem with javascript clicking to change CSS!

I hope that the outer frame and text of the clicked option can be thickened after clicking, but the ones that are not selected should not be thickened! I have tried several ways of writing, but I still don't know how To complete this requirement, I hope to get everyone's help, thank you.

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 >
  <li >
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li >
    <h2>beef</h2>
    <p>$600</p>
  </li>
</ul>

<h2 >Your food of choice is <span ></span>The total price is<span ></span></h2>

CodePudding user response：

How to add CSS after click through javascript and remove it if not clicked?

Suppose we have a class"item",we want change "h1"

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

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

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

toggle means: (If h1 has this class,remove,if not,add)

CodePudding user response：

You need to toggle the class, you can do that by removing it from every item and only setting it to the selected one:

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

Also you have a CSS specificity issue:

when using only .bold, the border would be overriden by .product＿list .item

Note, try using 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 >
  <li >
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li >
    <h2>beef</h2>
    <p>$600</p>
  </li>
</ul>

<h2 >Your food of choice is <span ></span>The total price is<span ></span></h2>

CodePudding user response：

With jQuery, two :radios and their corresponding 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 >
  <input type="radio" name="product" id="coke">
  <label  for="coke">
    <h2>coke</h2>
    <p>$100</p>
  </label>
  <input type="radio" name="product" id="beef">
  <label  for="beef">
    <h2>beef</h2>
    <p>$600</p>
  </label>
</div>

<h2 >Your food of choice is <span >?</span>. The total price is <span >?</span>.</h2>