循环遍历具有自己 div 中的类的对象 [重复]

Question

我有一些 div，其中每个都包含多个图像。每个图像都有相同的类。在 div 的末尾，我有一个按钮，当单击该按钮时，它会执行一个 Javascript 函数，该函数会成功循环遍历图像。但我需要 for 循环更精确。我的代码看起来像这样。

我的 HTML div 结构看起来像这样。

        <div>
            <img class="myImage" src="image1.png">
            <img class="myImage" src="image2.png">
            <img class="myImage" src="image3.png">
            <button onclick="imageLooper()">Click here!</button>
        </div>
        <div>
            <img class="myImage" src="image4.png">
            <img class="myImage" src="image5.png">
            <img class="myImage" src="image6.png">
            <button onclick="imageLooper()">Click here!</button>
        </div>
            <img class="myImage" src="image7.png">
            <img class="myImage" src="image8.png">
            <img class="myImage" src="image9.png">
            <button onclick="imageLooper()">Click here!</button>
        </div>
        <script src="js/main.js"></script>

我的 javascript for 循环只是一个基本的 for 循环。

    function imageLooper() {
    var images = document.getElementsByClassName("myImage");
    for (var i = 0; i < images.length; i++) {
        console.log(images[i]);
    }
}

它成功地循环了所有这些。但问题是，我想让这个 for 循环更精确。我的意思是，循环不应该循环遍历所有图像，但它应该循环遍历单击按钮的 div 内部。问题是，这些 div 是动态的。我的意思是，这些 div 使用 php 代码从 mysql 打印（不知道打印是否正确）。我为此写了一个所谓的管理面板。因此，每当我从管理面板添加内容时，这些 div 就会增加 1，或者每当我从管理面板删除时，就会删除一个 div。

简而言之。如何循环播放图像。我不能更改类，因为这个 div 是由 PHP 打印的。是否可以仅在 Javascript 中执行此操作。

PS：我可以更改我的 PHP 代码，以便每个 div 都可以有不同的 id。

Answer 1

引用被点击的按钮，选择父项，选择子项

function imageLooper(btn) {
  var images = btn.closest("div").getElementsByClassName("myImage");
  for (var i = 0; i < images.length; i++) {
    console.log(images[i]);
  }
}

<div>
  <img class="myImage" src="image1.png">
  <img class="myImage" src="image2.png">
  <img class="myImage" src="image3.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<div>
  <img class="myImage" src="image4.png">
  <img class="myImage" src="image5.png">
  <img class="myImage" src="image6.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<div>
  <img class="myImage" src="image7.png">
  <img class="myImage" src="image8.png">
  <img class="myImage" src="image9.png">
  <button onclick="imageLooper(this)">Click here!</button>
</div>
<script src="js/main.js"></script>

如果您不使用内联事件并使用类，那会更干净

document.querySelectorAll(".slideshow").forEach(function(div) {
  var btn = div.querySelector("button");
  var images = div.querySelectorAll("img");

  btn.addEventListener("click", function() {
     console.log(images);
  });
});

<div class="slideshow">
  <img class="myImage" src="image1.png">
  <img class="myImage" src="image2.png">
  <img class="myImage" src="image3.png">
  <button>Click here!</button>
</div>
<div class="slideshow">
  <img class="myImage" src="image4.png">
  <img class="myImage" src="image5.png">
  <img class="myImage" src="image6.png">
  <button>Click here!</button>
</div>
<div class="slideshow">
  <img class="myImage" src="image7.png">
  <img class="myImage" src="image8.png">
  <img class="myImage" src="image9.png">
  <button>Click here!</button>
</div>

Answer 2

代替：

var images = document.getElementsByClassName("myImage");

给你的元素添加一个参数并传入。例如：

<button onclick="imageLooper(this)">Click here!</button>

注意：“这个”。 然后将 imageLooper 定义为：

function imageLooper(me) {
    var images = me.parentNode.getElementsByClassName("myImage");
}

现在，images 只包含当前块中的图像。

Answer 3

在当今时代，使用内联事件处理程序并不理想 - 您可以轻松地将其外部化并使用单个事件侦听器，使用 querySelectorAll 来识别感兴趣的节点。

    document.querySelectorAll('div button').forEach( bttn=>{
        bttn.addEventListener('click',e=>{
            let col=e.target.parentNode.querySelectorAll('img');
                col.forEach( img=>{
                    console.log( img )
                })
        })
    })

<div>
  <img class="myImage" src="image1.png">
  <img class="myImage" src="image2.png">
  <img class="myImage" src="image3.png">
  <button>Click here!</button>
</div>
<div>
  <img class="myImage" src="image4.png">
  <img class="myImage" src="image5.png">
  <img class="myImage" src="image6.png">
  <button>Click here!</button>
</div>
<div>
  <img class="myImage" src="image7.png">
  <img class="myImage" src="image8.png">
  <img class="myImage" src="image9.png">
  <button>Click here!</button>
</div>