主页 / 问题 / 933238
Accepted
Alisa Bondarchuk
Asked:2020-01-17 19:55:10 +0000 UTC2020-01-17 19:55:10 +0000 UTC

如何使用类在单击时传递按钮名称？

  • 772

请帮帮我。在单击相邻 div-e 中的按钮时，必须显示该按钮的名称。您需要使用纯 JS 和类（如果可能）来实现这一点，因为按钮没有 id，但我不使用 TagName 来实现，因为还有其他按钮。

HTML

   <div class="result><p><Здесь должен быть отображён name кнопки</p></div>
    <ul>
        <li class="slide"><button name="N102" class="btn"/>Button 1</li> 
        <li class="slide"><button name="N104" class="btn"/>Button 2</li> 
        <li class="slide"><button name="N106" class="btn"/>Button 3</li> 
        <li class="slide"><button name="N108" class="btn"/>Button 4</li>
    </ul>

它适用于我的搜索，但我无法通过单击按钮来解决。

javascript

2 个回答

  1. 在JQ上。

    $(function(){
$('.btn').on('click',function(e){
   $('.result').text($(e.target).attr('name'));
 })
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result"><p><Здесь должен быть отображён name кнопки</p></div>
    <ul>
        <li class="slide"><button name="N102" class="btn"/>Button 1</li> 
        <li class="slide"><button name="N104" class="btn"/>Button 2</li> 
        <li class="slide"><button name="N106" class="btn"/>Button 3</li> 
        <li class="slide"><button name="N108" class="btn"/>Button 4</li>
    </ul>

    在纯 JS 上。

    var btn = document.getElementsByClassName('btn');
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click',function(e){
document.getElementsByClassName('result')[0].innerHTML = e.target.name
})
}
    <div class="result"><p>Здесь должен быть отображён name кнопки</p></div>
    <ul>
        <li class="slide"><button name="N102" class="btn"/>Button 1</li> 
        <li class="slide"><button name="N104" class="btn"/>Button 2</li> 
        <li class="slide"><button name="N106" class="btn"/>Button 3</li> 
        <li class="slide"><button name="N108" class="btn"/>Button 4</li>
    </ul>

    • 1
  2. Best Answer

    纯js。name所有以 with开头的按钮N都会受到影响。

    document.querySelectorAll("button.btn[name^='N']").forEach(item => {
  item.addEventListener("click", e => {
    let elem = e.currentTarget;
    let name = elem.getAttribute("name");
    document.querySelector("div.result > p").innerHTML = name;
  });
});
    <div class="result">
  <p>Здесь должен быть отображён name кнопки</p>
</div>

<ul>
  <li class=" slide "><button name="N102 " class="btn " />Button 1</li>
  <li class="slide "><button name="N104 " class="btn " />Button 2</li>
  <li class="slide "><button name="N106 " class="btn " />Button 3</li>
  <li class="slide "><button name="N108 " class="btn " />Button 4</li>
</ul>

    • 1

相关问题