Использование JavaScript для целевого класса

Question

У меня есть следующий сценарий в голове элемента:

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

и следующую структуру в элемент тела:

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

Я пытаюсь добиться следующего: когда пользователь нажимает на сообщение «Нажмите, чтобы исчезнуть красным ящиком», функция должна сделать каждый div с классом: «red_box», чтобы стать прозрачным. Мне понравились бы некоторые указатели (не JQuery, пожалуйста), спасибо!

Answer 1

Удалить точку в имени класса при вызове функции:

onmouseover="changeOpacity('red_box')" 

document.getElementsByClassName(className) принимает имя класса в виде строки. Если вы хотите использовать селектор CSS, вы можете вместо этого использовать document.querySelectorAll('.red_box').

Как указано @pointy в его комментарии, вы также устанавливаете непрозрачность так же, как и начальное значение. Вероятно, хотите изменить это на что-то между 0 и 0.9, в зависимости от уровня прозрачности, который вы хотите.

Answer 2

Вы установили непрозрачность же в CSS и функции, а также вам необходимо удалить точку в onmouseover="changeOpacity('red_box')"

Изменение функции JS и HTML, чтобы быть что-то вроде ниже, и он будет работать хорошо ,

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>