How to detect the element i clicked on from an array

Question

I am trying to make this project where i have a bunch of photos. I want to make it so that whenever i hover on a photo an < i > element displays as block ( default it is none ). I can't figure out how to make it.. everything i used made it so that all the i elements displayed. This is the javaScript code.

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>

mateleco · Accepted Answer · 2020-04-25 21:54:30Z

2

You can acheive this using self-executing 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))
})

edited Apr 25, 2020 at 21:54

mateleco

6199 silver badges18 bronze badges

answered Apr 25, 2020 at 20:31

Seif El-Din Sweilam

2742 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mateleco Over a year ago

You have to remove the "newI" parameter of the innermost functions, otherwise the "newI" variable will hold the event object, not the index "i". However, nice way of using closures.

Alison Iuri · Accepted Answer · 2020-04-25 20:35:57Z

1

You can get it from the addEventListener as event.target, one possible solution should be like:

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

See if it helps ;D

answered Apr 25, 2020 at 20:35

Alison Iuri

3362 silver badges5 bronze badges

Comments

Arun Mohan · Accepted Answer · 2020-04-25 20:42:51Z

1

The simple trick you can do is on mouse enter event add a class say hover-effect in each element in an array of poza elements. Then in css use the following rule

i {
  display: none;
}

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

On mouse leave remove the class. This approach will be neat and clean.

(see documentation on + selector)

edited Apr 25, 2020 at 20:42

answered Apr 25, 2020 at 20:31

Arun Mohan

1,2271 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to detect the element i clicked on from an array

3 Answers 3

You can acheive this using self-executing function:

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

You can acheive this using self-executing function:

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related