Mit Javascript Klasse

Question

Ich habe das folgende Skript im Kopf Element Ziel:

<script> 
function changeOpacity(className) { 

var elems = document.getElementsByClassName(className); 
var index = 0, length = elems.length; 
for (; index < length; index++) { 
    elems[index].style.transition = "opacity 0.3s linear 0s"; 
    elems[index].style.opacity = 0.8; 
    } 
} 
</script> 

<style> 
.red_box {width:100px;height:100px;opacity:1;background:red} 
</style> 

und die folgende Struktur im Körper Element:

<div onmouseover="changeOpacity('.red_box')">Click to fade red boxes</div> 

<div class="red_box">Box 1</div> 
<div class="red_box">Box 2</div> 
<div class="red_box">Box 3</div> 

ich folgendes zu erreichen bin versucht: Wenn der Benutzer auf die Meldung "Klicken, um rote Felder zu verblassen" klickt, sollte die Funktion jedes Div mit der Klasse "red_box" machen, um transparent zu werden. Ich würde gerne einige Zeiger (nicht Jquery bitte), Danke!

Answer 1

den Punkt in dem Klassennamen entfernen beim Aufruf der Funktion:

onmouseover="changeOpacity('red_box')" 

document.getElementsByClassName(className) nimmt den Klassennamen als String zurück. Wenn Sie einen CSS-Selektor verwenden möchten, können Sie stattdessen document.querySelectorAll('.red_box') verwenden.

Wie von @ pointy in seinem Kommentar angegeben, setzen Sie die Deckkraft auch auf den Anfangswert. Wahrscheinlich möchten Sie das auf etwas zwischen 0 und 0,9 ändern, abhängig von der gewünschten Transparenz.

Answer 2

Sie hatte die Opazität auf das gleiche in der CSS gesetzt und die Funktion, und auch benötigt man in onmouseover="changeOpacity('red_box')"

den Punkt entfernen

Ihre js Funktion und html ändern so etwas wie die unten zu sein und es wird funktionieren gut .

function changeOpacity(className) { 
 

 
    var elems = document.getElementsByClassName(className); 
 
    console.log(elems) 
 
    var index = 0, 
 
    length = elems.length; 
 
    for (; index < length; index++) { 
 
    elems[index].style.transition = "opacity 0.3s linear 0s"; 
 
    elems[index].style.opacity = 0.5; 
 
    } 
 
}

.red_box { 
 
    width: 100px; 
 
    height: 100px; 
 
    opacity: 1; 
 
    background: red 
 
}

<div onmouseover="changeOpacity('red_box')">Click to fade red boxes</div> 
 

 
<div class="red_box">Box 1</div> 
 
<div class="red_box">Box 2</div> 
 
<div class="red_box">Box 3</div>