![](/img/trans.png)
[英]How to remove and add css animation property in single click with JavaScript
[英]How to add CSS after click through javascript and remove it if not clicked
我遇到了一个问题 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>
如何在点击 javascript 后添加 CSS 并在未点击时将其删除?
假设我们有一个类“item”,我们想改变“h1”
add class:
e.currentTarget.classList.add('item')
remove class:
e.currentTarget.classList.remove('item')
toggle class:
e.currentTarget.classList.toggle('item')
切换意味着:(如果 h1 有这个 class,删除,如果没有,添加)
您需要切换 class,您可以通过从每个项目中删除它并仅将其设置为选定的项目来做到这一点:
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>
使用 jQuery,两个:radio
及其对应的label
:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.