Question

我正在制作图片库。现在我有一些像这样的图像

<ul id="moniqueGalList">
    <li><img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt=""></li>
    <li><img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt=""></li>
</ul>

使用点击功能我捕捉当前图像点击

for (var i = 0; i < moniqueThumbs.length; i++) {
    moniqueThumbs[i].addEventListener("click", grabBigImgPath);
}

function grabBigImgPath() {
    var currentThumbClicked = this;
}

如何保存moniqueThumbs数组中的前一个元素和下一个元素（即varPrev和VarNext值）？

Answer 1

我认为你说当其中一张图片发生咔嗒声时，你想要将变量设置为上一张图像（如果有的话）和下一张图像（如果有的话）。

如果是这样，你可以这样做：

function grabBigImgPath() {
    var currentThumbClicked = this;
    var li = this.parentNode;
    var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild;
    var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild;
}

如果没有上一个或下一个元素，那么这些将是null。

previousElementSibling / nextElementSibling / firstElementSibling：您的DOM结构是一系列li元素，每个元素都包含img。 li元素是“兄弟”元素（它们共享相同的直接父元素）。元素previousElementSibling是它之前的兄弟元素;它的nextElementSibling是它之后的元素。 firstElementChild是元素中的第一个子元素。

IIRC，在IE9之前IE中不支持那些DOM属性。如果你必须支持IE8，那就更难了，因为你必须使用previousSibling / nextSibling / firstChild，这可能是非Element节点，这意味着你必须循环。

直播示例：

var moniqueThumbs = document.querySelectorAll(".moniqueThumbs");
for (var i = 0; i < moniqueThumbs.length; i++) {

  moniqueThumbs[i].addEventListener("click", grabBigImgPath);
}

function grabBigImgPath() {
  var currentThumbClicked = this;
  var li = this.parentNode;
  var prevThumb = li.previousElementSibling && li.previousElementSibling.firstElementChild;
  var nextThumb = li.nextElementSibling && li.nextElementSibling.firstElementChild;
  
  snippet.log("Clicked: " + this.getAttribute("data-bigimgpath"));
  snippet.log("Previous: " + (prevThumb ? prevThumb.getAttribute("data-bigimgpath") : "(none)"));
  snippet.log("Next: " + (nextThumb ? nextThumb.getAttribute("data-bigimgpath") : "(none)"));
  snippet.logHTML("<hr>");
}

<ul id="moniqueGalList">
  <li>
    <img class="moniqueThumbs" src="img/1Thumb.jpg" data-bigimgpath="img/1Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/2Thumb.jpg" data-bigimgpath="img/2Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/3thumb.jpg" data-bigimgpath="img/3Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/4thumb.jpg" data-bigimgpath="img/4Full.jpg" alt="">
  </li>
  <li>
    <img class="moniqueThumbs" src="img/5thumb.jpg" data-bigimgpath="img/5full.jpg" alt="">
  </li>
</ul>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

更多要在the DOM core specification中探索。

如果你必须支持IE8，我说的那些循环看起来像这样：

function getPreviousElementSibling(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // 1 = Element
            return prev;
        }
    }
    return null;
}

...这就是为什么我们有这么多的库如jQuery，YUI等来帮助我们进行DOM遍历。： - ）

抓取数组中的上一个和下一个元素

1 个答案: