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>

循环使用JQuery并不是我想要的

2 个答案: