css 如何获取第一次点击的值20 ° C并更改为250 ° C如何获取我点击的当前值

ukqbszuj  于 2023-02-01  发布在  其他
关注(0)|答案(3)|浏览(143)
const prices = document.querySelectorAll('.price');
prices.forEach(price => {
  price.addEventListener('click', e => {
    prices.forEach(el => el.classList.remove('active'));
    e.target.classList.add('active');

    const currentValue = e.target.value;
  })
})
<ul class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
  <ul>

我的问题:

  • 当i改变值时,值被多次存储在currentValue变量中。
  • (我想得到1个值)
  • 请向我解释,并张贴网站,以获得更多的了解。
ct3nt3jp

ct3nt3jp1#

属性data-value在脚本中显示为price.dataset.value

const prices = document.querySelectorAll('.price');
prices.forEach(price => {
    price.addEventListener('click', e => {
       prices.forEach(el => el.classList.remove('active'));
       e.target.classList.add('active');

       const currentValue = e.target.dataset.value;
       console.log(currentValue)
    })
})
<ul class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>
ljsrvy3e

ljsrvy3e2#

e.target.value用于获取输入元素的值。
要获取元素的文本值,需要使用element.textContent,如果要从data属性获取值,可以使用element.dataset.value

const prices = document.querySelectorAll('.price');
prices.forEach(price => {
    price.addEventListener('click', e => {
       prices.forEach(el => el.classList.remove('active'));
       e.target.classList.add('active');

       const textValue = e.target.textContent;              // get the list's text-value
       const currentValue = e.target.dataset.value + " ฿";  // get the list's data-value
       console.log(textValue, currentValue)
    })
})
<ul class="money">
  <li class="price one" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>
juzqafwq

juzqafwq3#

你也可以使用element.getAttribute()方法来得到你的值,另外,顺便说一句,你可以使用event delegation来简化你的javascript,而且你只需要在父节点上有一个事件监听器,而不是在每个li上都有一个,如下所示:

const prices = document.querySelectorAll('.price');
document.querySelector('.money').addEventListener('click', e => {
  prices.forEach(el => el.classList.remove('active'));
  e.target.classList.add('active');
  const currentValue = e.target.getAttribute('data-value');
  console.log(currentValue);
})
.active {
  outline: 1px solid gray;
  background-color: yellow;
}
<ul class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>

相关问题