Javascript

Question

我目前正在研究垂直 javascript 图像滑块，我正在尝试使其动态化，以便我可以使用相同的代码拥有 1 个以上的滑块。除了我无法定位外，一切正常当前包装器..

我怎么知道当前正在使用哪个包装器？

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

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

基于你的 HTML 使用这个和 parentNode:

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>

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 中找到当前号码？

Javascript - How do i find the current number in a nodelist/querySelectorAll?

nodelist