如果循环中属性值和 ID 值相同，条件将如何工作

Question

<style>

    .heading {
        color: red;
    }
    
    .button {
        font-size: 18px;
    }
    
    .skyblue {
        background-color: skyblue;
    }
</style>

如果

标签的"data-mh"和标签的id有相似的属性 比起我点击按钮，按钮的背景颜色会改变。 并且该属性将打印在 P 标签上。我的代码首先使用 按钮，但它不适用于第二个或其他按钮。 /* 如何通过循环实现 */

<h1 class="heading" data-mh="item1">Hello World</h1>
<button class="button" id="item1">Click Here</button>

<h1 class="heading" data-mh="item2">Hello World</h1>
<button class="button" id="item2">Click Here</button>

<h1 class="heading" data-mh="item3">Hello World</h1>
<button class="button" id="item3">Click Here</button>

<p id="demo"></p>
<!-- This Paragraph tag will print my attribute -->

<!-- HTML End -->

<script>
    var x = document.querySelector(".heading").getAttribute("data-mh"); // This variable is to get Attribute of "data-mh"
    var y = document.querySelector(".button"); // Button selection. By clicking this button I will get print my Attribute
    var z = y.getAttribute("id"); // Getting button id to compaire with "data-mh" attribute
    y.onclick = function() {
        //If X (ID) and Z (Attribute) matching then working this Condition
        if (x == z) {
            y.classList.toggle("skyblue");
            document.getElementById("demo").innerHTML = x+" "+z; // This line of code will print my Attribute on P tag
        }
    }
</script>

Answer 1

此代码通过遍历每个按钮并完成事件侦听器和比较的所有设置来完成任务。

// select all the buttons
const buttons = document.querySelectorAll(".button");

// loop over each one
for(const button of buttons)
{
  // add an on click listener
    button.addEventListener("click", (event) => {
    // get the button ID
    const x = button.getAttribute("id");
    /// get the previous element's (the heading's) data-mh attribute
    const z = button.previousElementSibling.getAttribute("data-mh");
    // compare them
    if(x == z)
    {
      button.classList.toggle("skyblue");
      document.getElementById("demo").innerHTML = x+" "+z;
    }
  });
}

这是一个演示：https://jsfiddle.net/w3d0z8Ly/

Answer 2

检查我的回答：-

var x = document.querySelectorAll(".heading"); // This variable is to get Attribute of "data-mh"
    var y = document.querySelectorAll(".button"); // Button selection. By clicking this button I will get print my Attribute
    // var z = y.getAttribute("id"); // Getting button id to compaire with "data-mh" attribute
    function btnClick(e) {
      for(var i = 0; i < x.length; i++) {
        if(e.getAttribute("id") == x[i].getAttribute("data-mh"))  {
          document.getElementById("demo").innerHTML = x[i].getAttribute("data-mh");
        }
      }
      for(var j = 0; j < y.length; j++) {
        y[j].classList.remove("skyblue");  
      }
      e.classList.add("skyblue");
    }
      

.heading {
        color: red;
    }
    
    .button {
        font-size: 18px;
    }
    
    .skyblue {
        background-color: skyblue;
    }

<h1 class="heading" data-mh="item1">Hello World</h1><button class="button" id="item1" onClick="btnClick(this)">Click Here</button>

<h1 class="heading" data-mh="item2">Hello World</h1>
<button class="button" id="item2" onClick="btnClick(this)">Click Here</button>

<h1 class="heading" data-mh="item3">Hello World</h1>
<button class="button" id="item3" onClick="btnClick(this)">Click Here</button>

<p id="demo"></p>

请检查这个

Answer 3

const buttons = document.querySelectorAll(".button");
const headings = document.querySelectorAll(".heading");

for (const button of buttons) {
  for (const heading of headings) {
    button.addEventListener("click", (event) => {
      const x = button.getAttribute("id");
      const z = heading.getAttribute("data-mh");
      if (x == z) {
        button.classList.toggle("skyblue");
        document.getElementById("demo").innerHTML = x + " " + z;
      }
    });
  }
}