繁体   English   中英

如何检测我从数组中单击的元素

[英]How to detect the element i clicked on from an array

我正在尝试在我有一堆照片的地方制作这个项目。 我想这样做,以便每当我在照片上的 hover 时 < i > 元素显示为块(默认为无)。 我不知道如何制作它..我使用的所有东西都让它显示了所有 i 元素。 这是 javaScript 代码。

JavaScript

var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e) {
    e.addEventListener("mouseover", function () {
        for (var i = 0; i < plus.length; i++)
            plus[i].style.display = "block"
    })
    e.addEventListener("mouseout", function () {
        for (var i = 0; i < plus.length; i++)
            plus[i].style.display = "none"
    })
})
HTML

            <div class="row poze">
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1517343985841-f8b2d66e010b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1561140895-9d144461935e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>

您可以使用自执行 function 来实现此目的:


var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");

poza.forEach(function (e, i) {
    e.addEventListener("mouseover", (function (newI) {
        return function() {
            plus[newI].style.display = "block"
        }
    })(i))
    e.addEventListener("mouseout", (function (newI) {
        return function() {
            plus[newI].style.display = "none"
        }
    })(i))
})

您可以做的简单技巧是在鼠标输入事件上添加一个 class 说在 poza 元素数组中的每个元素中的悬停效果。 然后在 css 中使用以下规则

i {
  display: none;
}

.hover-effect+i {
 display: 'block';        
}

在鼠标离开时移除 class。 这种方法将整洁干净。

(参见 + 选择器的文档)

您可以从addEventListener作为event.target获取它,一种可能的解决方案应该是:

poza.forEach(function (e) {
    e.addEventListener("mouseover", function (event) {
       event.target.style.display = "block"
    })
    e.addEventListener("mouseout", function (event) {
       event.target.style.display = "none"
    })
})

看看有没有帮助;D

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM