Javascript - 如何在节点列表/querySelectorAll 中找到当前编号？

Question

我目前正在开发一个垂直的 javascript 图像 slider ，我正在尝试使其动态化，以便我可以使用相同的代码拥有超过 1 个 slider ..一切正常，除了我无法定位当前的包装器..

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

我尝试浏览 STO 一段时间，但只能找到一些非常旧的答案，我们现在已经 2017 年了，这个问题有什么真正的解决方案吗？

生成 slider 的 HTML/PHP

<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>

Javascript

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;
    }

如果你看看这些函数，我将“0”作为参数传递，这当然应该是动态的

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);
}

基于您使用此节点和parentNode的HTML:

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";
}

<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>