在JQuery中循環並沒有達到我想要的效果

我創建了一個函數，以便當用戶將鼠標懸停在圖像上時，圖像不透明度降低，文本的可見性變得可見而不隱藏。我使用循環來爲多個類應用此功能，但循環並沒有按照我希望的方式進行。我不知道爲什麼。在JQuery中循環並沒有達到我想要的效果

這就是我想要它做的

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

來源

2016-11-21 cruise_lab

我建議增加一個通用類，所有這些元素如果可能的話，而不是循環。 @Geeky - 他改變CSS的方式是完全合法的，而且你的語法是錯誤的。對象使用'：'而不是逗號，如果您只更改一個屬性，對象也不需要。 – Santi

要知道，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實例 - 你能夠得到被徘徊當前元素，做你所需要的。

來源

2016-11-21 20:55:12 tymeJV

但是，如果我想改變另一個div的不透明度。 $（選擇器）.hover（function（）{（'m-0'）.css（「opacity」，「0.5」）; }，function（）{（'m-0'）.css （「不透明」，「1」）; }）;假設存在m-0，並存在m-1，m-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>

來源

2016-11-21 20:59:53 Syden

在JQuery中循環並沒有達到我想要的效果

回答

相關問題