Question

我正在尝试在一个页面上创建多个弹出窗口，这些弹出窗口将在单击对应于它们的按钮后出现。我目前在同一个班级，就像在这里一样：

<div>
    <!-- Popup -->
        <div class="popup">
            <div class="popup-content">
                Some text here
            </div>
        </div>
    <!-- Button -->
    <img src="button.png" class="popup-button"/>
</div>

问题是我正在努力使用JavaScript代码访问各个元素。我不确定用什么替换手动数组访问（现在为[0]）。

<script>
// Get the popup
var popup = document.getElementsByClassName("popup")[0];

// Get the button that opens the popup
var btn = document.getElementsByClassName("popup-button")[0];

// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
    popup.style.display = "block";
}

</script>

现在，我可以创建多个脚本并手动访问每个元素的数组，但是我当然想使其自动化，以便脚本可以根据单击的按钮来运行。假设，如果单击了第五个按钮，则会出现第五个弹出窗口。谢谢！

Answer 1

鉴于您的HTML，最简单的方法可能是访问以前单击的同级按钮以进入<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> <div class="row row-eq-height"> <div class="col-sm-2 left-sidebar"> some content </div> <div class="col-sm-10" style="height: 100vh"> some more content </div> </div>，然后更改其样式：

.popup

document.querySelectorAll('.popup-button').forEach(button => {
  button.onclick = () => {
    button.previousElementSibling.style.display = 'block';
  };
});

.popup {
  display: none;
}

Answer 2

在Javascript中链接多个元素的最佳方法是通过the dataset of the elements使用id。

// Get the popup's btn list
var popupsBtn = document.getElementsByClassName("popup-btn");

// Go through the popup's btn list
for (var i = 0; i < popupsBtn.length; i++) {
  
  // Define the onclick event on popup's btn
  popupsBtn[i].onclick = function() {
  
    // Get the popup associated to the btn with the data-popup-id
    var popup = document.getElementById("popup-" + this.dataset.popupId);
    
    // Use a class to toggle popup visible or not
    popup.classList.toggle("visible");
    
  }
  
}

.popup {
  display: none;
}

.popup.visible {
  display: block;
}

<!DOCUMENT html>
<html>
  <head></head>
  <body>
    <div>
      <div id="popup-1" class="popup">popup 1 here</div>
      <img src="button.png" class="popup-btn" data-popup-id="1" />
    </div>
    <div>
      <div id="popup-2" class="popup">popup 2 here</div>
      <img src="button.png" class="popup-btn" data-popup-id="2" />
    </div>
    <div>
      <div id="popup-3" class="popup">popup 3 here</div>
      <img src="button.png" class="popup-btn" data-popup-id="3" />
    </div>
  </body>
</html>

Answer 3

您可以使用其他属性来标识按钮。您不能仅依靠className。您可以使用data-id属性并将其传递给方法。使用this.

Answer 4

根据您的HTML结构，有多种可能性。

无论如何，我建议您使用.querySelectorAll()来获取元素，然后使用.forEach()来执行代码。

我尝试使用您的许多代码来使其正常工作。

与父级div

// Get all the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");

btns.forEach(function(btn, index) {
  // When the user clicks the button, open the popup that is in the same parent div
  btn.onclick = function() {
    btn.closest('div').querySelector('.popup').style.display = "block";
  }
});

.popup {
  display: none;
}

<div>
  <div class="popup">
    <div class="popup-content">Pop-up 1</div>
  </div>
  <img src="button.png" class="popup-button" />1
</div>

<div>
  <div class="popup">
    <div class="popup-content">Pop-up 2</div>
  </div>
  <img src="button.png" class="popup-button" />2
</div>

<div>
  <div class="popup">
    <div class="popup-content">Pop-up 3</div>
  </div>
  <img src="button.png" class="popup-button" />3
</div>

没有上级div

// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");

btns.forEach(function(btn, index) {
  // When the user clicks the button, open the popup (hidden by default)
  btn.onclick = function() {
    popups[index].style.display = "block";
  }
});

.popup {
  display: none;
}

<div class="popup">
  <div class="popup-content">Pop-up 1</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
  <div class="popup-content">Pop-up 2</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
  <div class="popup-content">Pop-up 3</div>
</div>
<img src="button.png" class="popup-button" />

与父级div一起使用的此解决方案将起作用，即使弹出窗口和按钮彼此不相邻也是如此。但是元素的顺序（和索引）必须相同。在这里查看：

// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");

btns.forEach(function(btn, index) {
  // When the user clicks the button, open the popup (hidden by default)
  btn.onclick = function() {
    popups[index].style.display = "block";
  }
});

.popup {
  display: none;
}

<img src="button.png" class="popup-button" />1
<img src="button.png" class="popup-button" />2
<img src="button.png" class="popup-button" />3

<div class="popup">
  <div class="popup-content">Pop-up 1</div>
</div>
<div class="popup">
  <div class="popup-content">Pop-up 2</div>
</div>
<div class="popup">
  <div class="popup-content">Pop-up 3</div>
</div>

希望有帮助。

使用JS通过getElementsByClassName（）访问多个元素

4 个答案: