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内容div中包含的图像？

Answer 1

只需更改此行：

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

此行：

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

它将起作用。

Answer 2

针对您的后续问题，即一次显示多个项目（仅因为我还没有评论权限而发布为新答案）：

这应该可以解决问题。

主要区别在于，超出范围索引的任何测试都在单独的函数中进行，该函数在循环中被调用以处理多个不同的索引-并动态设置新值（而不是始终将其设置为“ x.length”或“ 1”。）

我还为项目列表使用了从零开始的数组（或者从技术上讲，是“类似于数组的对象”），并重命名了几个变量，但这只是个人喜好问题。

（编辑：请注意，新显示的图像不会自动定位在列表的末尾，因为HTML设置了它们的顺序，而脚本只是更改了它们的style.display属性。）

const availableSlides = document.querySelectorAll(".w3-content .mySlides");//Renamed
let slideIndex = 0; // Using 0 instead of 1 (for consistency w/ JS arrays)
showDivs();

function plusDivs(delta) { // Almost identical to your original function
  slideIndex += delta;
  showDivs();  
}

function wrap(tentative, max) { //This is where the magic happens
  let actualIndex;
  // If tentative index is too high/low, resumes counting from the bottom/top
  if (tentative > max) { actualIndex = tentative - (max + 1); }
  else if (tentative < 0) { actualIndex = tentative + (max + 1); }
  else { actualIndex = tentative; }
  return actualIndex;
}

function showDivs() { // Takes no args (acts on global slideIndex instead)
  // Hides all slides
  for (let i = 0; i < availableSlides.length; i++) {
    availableSlides[i].style.display = "none";
  }
  // Shows thatMany slides, starting from slideIndex
  const thatMany = 5; // Sets the number of slides to display
  // Calls wrap to keep slideIndex from being out of range
  slideIndex = wrap(slideIndex, availableSlides.length - 1);
  // Calls wrap on thatMany indexes and displays the resulting slides
  for (let j = 0; j < thatMany; j++) {
    let tentativeIndex = slideIndex + j;
    let maxIndex = availableSlides.length - 1;
    availableSlides[wrap(tentativeIndex, maxIndex)].style.display = "block";
  }
}

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

2 个答案: