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>