在JQuery中循环并没有达到我想要的效果

Question

我创建了一个函数，以便当用户将鼠标悬停在图像上时，图像不透明度降低，文本的可见性变得可见而不隐藏。我使用循环来为多个类应用此功能，但循环并没有按照我希望的方式进行。我不知道为什么。

这就是我想要它做的

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

我试图用这样的循环。上述解决方案的工作，但它是很多重复，所以我想使用循环，但循环不起作用。

$(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"); 
     }); 
    } 
}); 

Answer 1

要知道，jQuery的接受多个元素的选择，就像$(".col1, .col2")等等等等 - 这样做。将您的数组一个字符串列表，并从那里：

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

使用的this实例 - 你能够得到被徘徊当前元素，做你所需要的。

Answer 2

工作例如：

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