javascript - JS 定位特定 div 中的图像，即使它们共享类

Question

我目前有由 PHP 循环提供的图像，我使用 JS 将其制作成轮播。这为我提供了幻灯片样式的图像选择，我可以将其拖到编辑器中并应用到页面:

<div class="w3-content w3-display-container">
      <?php foreach ($imageResult as $im): ?>
        <?php if($im['type'] == 'content'){?>

          <img class="mySlides" src="<?php echo $im['url']; ?>" style="max-width:200px; max-height:200px;">

        <?php } ?>
      <?php endforeach?>
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

这可行，但有一个问题:

选择图像并将其拖到页面区域后，如下所示:

<div class="fullContent"  id="fullContent" style="background-color:white; border: dotted 1px black;">
        <!--Image would be here-->
</div>

它仍然具有 mySlides 类，因此当我使用箭头在选择器中的图像之间移动时，它也会移动保存到页面上的 div 中的图像。

有没有办法改变 JS，使箭头只移动实际 w3-content div 中包含的图像？

Answer 1

只需更改这一行:

var x = document.getElementsByClassName("mySlides");

到这一行:

var x = document.querySelectorAll(".w3-content .mySlides");

它会起作用的。