Clik по div'у
Есть div в нём вложено ещё 3 div'a . Нужно чтобы после клика по одному из вложенных div'ов выводилось куда-нибудь ( в тот же alert ) его содержимое например...
написал что-то типо <div id="id4"> <div class="class1" style="margin-left:25% "> 1 </div> <div class="class1">2 </div> <div class="class1" style="margin-right:10% " > 3</div> </div> и в window.onload = function () {}
var e = document.getElementById("id4");
for(var i =0; i < e.childNodes.length; i ++){
if(e.childNodes[i].nodeType == 1){
e.childNodes[i].onclick = function(){
//e.childNodes[i].innerHTML = "white"; (*)
alert("работает !!!");
};
}
}
ВОПРОС 1 ) Объясните почему не работает строка (*) ... все перепробовал( и подскажите как это сделать-то.... ВОПРОС 2) Кажется (так оно и есть наверное) цикл можно было написать человеческий, типо обратиться к первым детям, а не проверять... МБ что-то путаю или недопонимаю, можете подсказать?( Заранее Спасибо!!! |
ОТВЕТ 1) К тому моменту, когда вызывается функция, назначенная onclick, переменная i всегда равна e.childNodes.length
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="id4">
<div class="class1">1</div>
<div class="class1">2</div>
<div class="class1">3</div>
</div>
<script>
var e = document.getElementById("id4");
for(var i = 0; i < e.childNodes.length; i++){
if(e.childNodes[i].nodeType == 1){
e.childNodes[i].onclick = (function(el) {
return function() {
el.innerHTML += " *";
//alert("работает !!!");
};
})(e.childNodes[i]);
}
}
</script>
<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>
ОТВЕТ 2) Человеческий цикл очень субъективен!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="id4">
<div class="class1">1</div>
<div class="class1">2</div>
<div class="class1">3</div>
</div>
<script>
document.getElementById("id4").addEventListener("click", function(event) {
if(!event.target.matches(".class1")) return;
event.target.textContent += " *";
});
</script>
<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>
P. S. Ещё можно так
for(let element of document.querySelectorAll("#id4 .class1")) {}
|
Цитата:
можно так this.innerHTML = "white"; можно так #коллекции-не-массивы [].forEach.call можно так замыкания |
Блин, точно.. только сделал чтобы он выводил номер свой , разобрался в замыкании! а вот что оно тут вылезет, даже не подумал. Спасибо всем))
|
| Часовой пояс GMT +3, время: 09:47. |