Looping in JQuery is not doing what I want it to

Question

I created a function so that when user hovers over an image, the image opacity lowers and the visibility of text becomes visible and not hidden. I used loops to apply this functionality for multiple classes, but the looping isn't doing what I want it to do. I am not sure why.

This is what I want it to do

$(document).ready(function(){

    var classes = [".col0",".col1", ".col2", ".col3", ".col4", ".col5", ".col6", ".col7", ".col8"]

    $(classes[0]).hover(function(){
        $(classes[0]).css("opacity", "0.5");
        }, function(){
        $(classes[0]).css("opacity", "1");
    });
    $(classes[1]).hover(function(){
        $(classes[1]).css("opacity", "0.5");
        }, function(){
        $(classes[1]).css("opacity", "1");
    });
    ..... And continue until it finishes all the variables 
});

I tried using loops like this. The above solution works, but it is a lot of repetition so I want to use loop, but loop does not work.

$(document).ready(function(){

    var classes = [".col0",".col1", ".col2", ".col3", ".col4", ".col5", ".col6", ".col7", ".col8"]

    for(i = 0; i < 8; i++){
        $(classes[i]).hover(function(){
            $(classes[i]).css("opacity", "0.5");
            }, function(){
            $(classes[i]).css("opacity", "1");
        });
    }
});

I'd suggest adding a common class to all of these elements if possible, instead of looping. @Geeky - The way he's changing CSS is completely legitimate, furthermore your syntax is wrong. Objects use `:`, not comma, nor is it necessary if you're only changing one property. — Tyler Roper, Nov 21 '16 at 20:54

score 0 · Accepted Answer · answered Nov 21 '16 at 20:55

0

You know, jQuery accepts multiple elements as a selector, just as $(".col1, .col2") etc etc - so do that. Convert your array to a string list and go from there:

var classes = [".col0",".col1", ".col2", ".col3", ".col4", ".col5", ".col6", ".col7", ".col8"]
var selector = classes.join(",");

$(selector).hover(function(){
    $(this).css("opacity", "0.5");
}, function(){
    $(this).css("opacity", "1");
});

Using an instance of this - you'll be able to get the current element being hovered and do what you need.

answered Nov 21 '16 at 20:55

tymeJV

103,943
14
161
157

But what if I want to change the opacity of another div. $(selector).hover(function(){ $('m-0').css("opacity", "0.5"); }, function(){ $('m-0').css("opacity", "1"); }); Assuming m-0 exist, and there is m-1, m-2, and so forth. How can I do that – cruise_lab Nov 21 '16 at 21:52

score 0 · Answer 2 · answered Nov 21 '16 at 20:59

Working example:

$(document).ready(function(){

    var classes = [".col0",".col1", ".col2", ".col3", ".col4", ".col5", ".col6", ".col7", ".col8"]

    for(i = 0; i < 8; i++){
        $(classes+[i]).hover(function(){
            $(this).css("opacity", "0.5");
            }, function(){
            $(this).css("opacity", "1");
        });
    }
});

.col1 {
  height: 100px;
  width: 100px;
  background: green;
}

.col2 {
  height: 100px;
  width: 100px;
  background: red;
}

.col3 {
  height: 100px;
  width: 100px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
</div>

Looping in JQuery is not doing what I want it to

2 Answers2