Question

我目前正在研究一个垂直的javascript图像滑块，我正在努力让它变得动态，以便我可以使用相同的代码拥有多个滑块..一切正常，但我无法定位当前的包装器.. < / p>

我如何知道当前使用哪个包装？

我试图浏览STO一段时间，但只能找到一些非常古老的答案，我们现在有2017年有没有真正解决这个问题的方法？

生成滑块的HTML / PHP

if ( not /^==/ )

的Javascript

<div  class="profileCosplaysWrapper">
    <div id="slideLeftVerticalSlider" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon"></div></div>
    <div id="slideRightVerticalSlider" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon"></div></div>
    <div id="profileCosplayImageWrapper" class="profileCosplayImageWrapper">
        <?php
        while ($stmt->fetch()) {
            ?>
            <a class="profileCosplayInnerWrapper" href="index.php?page=cosplay&id=<?php echo $profileCosplayId; ?>">
                <!--<div class="profileCosplayInnerWrapper">-->
                    <img class="profileCosplayImages" src="uploads/<?php echo $profileCosplays; ?>" alt="rate a cosplay latest 10 profile cosplays">
                <!--</div>-->
            </a>
            <?php
        }
        $stmt->close();
        ?>
    </div>
</div>

<div  class="profileCosplaysWrapper">
    <div id="slideLeftVerticalSlider" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon"></div></div>
    <div id="slideRightVerticalSlider" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon"></div></div>
    <div id="profileCosplayImageWrapper" class="profileCosplayImageWrapper">
        <?php
        while ($stmt->fetch()) {
            ?>
            <a class="profileCosplayInnerWrapper" href="index.php?page=cosplay&id=<?php echo $profileCosplayRandomId; ?>">
                <!--<div class="profileCosplayInnerWrapper">-->
                    <img class="profileCosplayImages" src="uploads/<?php echo $profileCosplaysRandom; ?>" alt="rate a cosplay latest 10 profile cosplays">
                <!--</div>-->
            </a>
            <?php
        }
        $stmt->close();
        ?>
    </div>
</div>

如果你看看这些功能我正在通过＆＃34; 0＆＃34;作为一个参数，哪个应该是动态的

var slideLeftVerticalSlider = document.querySelectorAll('.slideLeftVerticalSlider');
    var slideRightVerticalSlider = document.querySelectorAll('.slideRightVerticalSlider');
    var imagesWrapper = document.querySelectorAll('.profileCosplayImageWrapper');
    var profileRightInterval;
    var profileLeftInterval;

    slideLeftVerticalSlider.forEach(function(e){
        e.addEventListener('mouseover', profileMouseOverLeft, false);
    });
    slideRightVerticalSlider.forEach(function(e){
        e.addEventListener('mouseover', profileMouseOverRight, false);
    });
    slideLeftVerticalSlider.forEach(function(e){
        e.addEventListener('mouseout', function (e) {
            clearInterval(profileLeftInterval);
        });
    });
    slideRightVerticalSlider.forEach(function(e){
        e.addEventListener('mouseout', function (e) {
            clearInterval(profileRightInterval);
        });
    });

    function profileMouseOverLeft(e) {
        profileLeftInterval = setInterval(function () {
            profileMoveLeft(0);
        }, 7);
    }
    function profileMouseOverRight(e) {
        profileRightInterval = setInterval(function () {
            profileMoveRight(0);
        }, 7);
    }
    function profileMoveLeft(currentSlider) {
        imagesWrapper[currentSlider].scrollLeft += -5;
    }
    function profileMoveRight(currentSlider) {
        imagesWrapper[currentSlider].scrollLeft += 5;
    }

Answer 1

你应该可以使用它或event target

function profileMouseOverLeft(e) {
    console.log(this);
    console.log(e.target);
}

基于您的HTML使用此和parentNode：

＆＃13;

Array.from(document.querySelectorAll(".slideLeftVerticalSlider")).forEach( elem => elem.addEventListener("mouseover", left) )
Array.from(document.querySelectorAll(".slideRightVerticalSlider")).forEach( elem => elem.addEventListener("mouseover", right) )



function left (evt) {
   var wrapper = this.parentNode.querySelector(".profileCosplayImageWrapper")
   wrapper.style.backgroundColor = "red";
}

function right (evt) {
   var wrapper = this.parentNode.querySelector(".profileCosplayImageWrapper")
   wrapper.style.backgroundColor = "blue";
}

＆＃13;

<div  class="profileCosplaysWrapper">
    <div id="slideLeftVerticalSlider1" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon">L</div></div>
    <div id="slideRightVerticalSlider1" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon">R</div></div>
    <div id="profileCosplayImageWrapper1" class="profileCosplayImageWrapper">
        foo
    </div>
</div>

<div  class="profileCosplaysWrapper">
    <div id="slideLeftVerticalSlider2" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon">L</div></div>
    <div id="slideRightVerticalSlider2" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon">R</div></div>
    <div id="profileCosplayImageWrapper2" class="profileCosplayImageWrapper">
        foo
    </div>
</div>

＆＃13;

Answer 2

在你的事件处理程序中，你已经有了对元素的引用。

您可以搜索HTMLElementCollection以查找该元素的索引：

function getIndex(element) {
    for(var i=0; i<slideLeftVerticalSlider.length;i++)
    {
        if (slideLeftVerticalSlider[i]===element) return i;
    }
    return -1;
}

同样的方法可以应用于任何元素集合。您还应该为页面上的每个元素添加唯一ID。

Javascript - 如何在nodelist / querySelectorAll中找到当前数字？

2 个答案: