JavaScript针对一个特定的元素,只知道它的类

2022-01-30 14:53:22 标签 javascripthtml

我想知道如何目标一个特定的元素,只知道它的类。

我想点击。editprice按钮,只显示。popuppricecontainer旁边的按钮,而不是所有的。

关闭按钮工作良好,因为它是我想要隐藏的元素的子元素,我可以很容易地用parentNode锁定它。

这里有一把小提琴:https://jsfiddle。net/jwLf4smu/1/

这里有一个可运行的代码片段:

//CLOSE POPUP PRICE CONTAINER
//create variable from pop up close buttons
const popupClose = document.getElementsByClassName('popupClose');
//set price edit container to display none
Array.from(popupClose).forEach((popupClose) => {
  popupClose.addEventListener('click', () => {
    // 2x .parentNode to select the outer wrapper
    popupClose.parentNode.parentNode.style.display = "none";
  });
});
//OPEN POPUP PRICE CONTAINER
//create variable for all edit price buttons and price edit pop up container
const popupEditPrice = document.getElementsByClassName('editPrice');
const priceContainer = document.getElementsByClassName('popupPriceContainer');
//show price edit box
Array.from(popupEditPrice).forEach((popupEditPrice) => {
  popupEditPrice.addEventListener('click', () => {
    Array.from(priceContainer).forEach((priceContainer) => {
      priceContainer.style.display = "block";
    });
  });
});
#serviceList .position {
  margin-top: 16px;
}
.popupPriceContainer {
    display: none;
}
<section id="serviceList" class="items">
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 1
    </div>
    <div class="price">
      <span class="amount" id="priceElement">100</span>
    </div>
    <div class="popupPriceContainer">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 2
    </div>
    <div class="price">
      <span class="amount">1000</span>
    </div>
    <div class="popupPriceContainer">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 3
    </div>
    <div class="price">
      <span class="amount">240</span>
    </div>
    <div class="popupPriceContainer">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
</section>

###更喜欢使用类:

.noDisplay {
  display: none;
  }

然后使用(元素)。classList / 。add()或。remove()方法

完整的代码:

const
  editBtns  = document.querySelectorAll('button.editPrice')
, closeBtns = document.querySelectorAll('button.popupClose')
  ;
editBtns.forEach(btn=>
  {
  btn.onclick = ({target}) =>  // get only target object in event 
    {
    target.closest('div.position').querySelector('.popupPriceContainer').classList.remove('noDisplay')
    }
  })
closeBtns.forEach(btn=>
  {
  btn.onclick = ({target}) =>  // get only target object in event 
    {
    let 
      div_position            = target.closest('div.position')
      box_popupPriceContainer = div_position.querySelector('.popupPriceContainer')
    , price_El                = box_popupPriceContainer.querySelector('input.priceInput')
    , actual_amount_el        = div_position.querySelector('span.amount')
      ;
    if (target.matches('.submbitPrice'))
      {
      // do submit price stuff
      let priceVal = parseInt( price_El.value.replace(/\D/g, ''),10) || 0;  // otherwise use parseFloat()
 
      price_El.value = priceVal;
      actual_amount_el.textContent = priceVal
      // do submit price  other stuff 
      }
    // else price_El.value = actual_amount_el.textContent 
    box_popupPriceContainer.classList.add('noDisplay')
    }
  })
#serviceList .position {
  margin-top: 16px;
  }
.noDisplay {
  display: none;
  }
<section id="serviceList" class="items">
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 1
    </div>
    <div class="price">
      <span class="amount" id="priceElement">100</span>
    </div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 2
    </div>
    <div class="price">
      <span class="amount">1000</span>
    </div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 3
    </div>
    <div class="price">
      <span class="amount">240</span>
    </div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
</section>

但最好是使用委托方法

(获得全局点击的部分,然后确定wich按钮被点击)

我还改变了你的编辑价格/关闭价格的方法,把他们放在相同的按钮,这是更符合人体工程学

代码:

document.querySelector('#serviceList').onclick = ({target}) =>  // get only target object in event 
  {
  if (!target.matches('button.editPrice, button.submbitPrice')) return // ignore click elsewhere
 
  let 
    div_position            = target.closest('div.position')
  , price_El                = div_position.querySelector('input.priceInput')
  , actual_amount_el        = div_position.querySelector('span.amount')
    ;
  if (target.matches('button.editPrice'))
    {
    target.textContent = div_position.classList.toggle('noPriceEdit') ? 'Edit price' : 'Close edit'
    }
  else // button.submbitPrice stuff
    {
    let priceVal = parseFloat( price_El.value) || 0;  
    price_El.value = actual_amount_el.textContent = priceVal.toFixed(2)
 
    div_position.classList.add('noPriceEdit')
    div_position.querySelector('button.editPrice').textContent = 'Edit price'
    }
  }
#serviceList .position {
  margin-top: 16px;
  }
div.position.noPriceEdit > div.popupPriceContainer {
  display: none;
}
<section id="serviceList" class="items">
  <div class="position noPriceEdit">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">Service 1</div>
    <div class="price"><span class="amount" id="priceElement">100</span></div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice">Submit</button>
      </div>
    </div>
  </div>
  <div class="position noPriceEdit">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">Service 2</div>
    <div class="price"><span class="amount">1000</span></div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice">Submit</button>
      </div>
    </div>
  </div>
  <div class="position noPriceEdit">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">Service 3</div>
    <div class="price"><span class="amount">240</span></div>
    <div class="popupPriceContainer noDisplay">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice">Submit</button>
      </div>
    </div>
  </div>
</section>

###委托给主静态容器,并使用e。target和相对寻址:e.target.closest('.popupPriceContainer')

注意,我添加和删除了一个类。hide

###问题是在以下代码:

document.getElementById('serviceList').addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains('popupClose')) {
    const parent = tgt.closest('.popupPriceContainer')
    parent.classList.add('hide')
  }
  if (tgt.classList.contains('editPrice')) {
    const parent = tgt.closest('.position')
    parent.querySelector('.popupPriceContainer').classList.remove('hide')
  }
})
#serviceList .position {
  margin-top: 16px;
}
.hide {
  display: none;
}
<section id="serviceList" class="items">
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 1
    </div>
    <div class="price">
      <span class="amount" id="priceElement">100</span>
    </div>
    <div class="popupPriceContainer hide">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 2
    </div>
    <div class="price">
      <span class="amount">1000</span>
    </div>
    <div class="popupPriceContainer hide">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
  <div class="position">
    <button type="button" class="editPrice">Edit price</button>
    <div class="item">
      Service 3
    </div>
    <div class="price">
      <span class="amount">240</span>
    </div>
    <div class="popupPriceContainer hide">
      <div class="popupPriceInner">
        <input type="number" placeholder="100,00" class="priceInput">
        <button value="Set Value" class="submbitPrice popupClose">Submit</button>
        <button class="popupClose">Close</button>
      </div>
    </div>
  </div>
</section>

当点击“编辑价格”按钮时,上面代码中的forEach搜索所有价格容器并显示它们。

 popupEditPrice.addEventListener('click', () => {
     Array.from(priceContainer).forEach((priceContainer) => {
         priceContainer.style.display = "block";
     });
 });

每个“编辑价格”按钮及其对应的“价格容器”都在

中。

为单击侦听器声明一个事件参数

获得点击价格按钮使用的参考

获取对应的引用event.currentTarget

使用最近的方法.position using closest method找到

.popupPriceContainer inside t使用querySelectordiv.position using query显示了

使用.popupPriceContainer using display block..

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码