我正在制作图片库。现在我有一些像这样的图像
<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值)?
我想您是说,当单击其中一张图像时,您想将变量设置为上一张图像(如果有)和下一张图像(如果有)。
如果是这样,您可以执行以下操作:
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>
如果您必须支持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遍历。:-)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句