Как заменить элементы массива?
Такой вопрос (код не надо писать, пока), помогите плиз логикой.
Есть Массив_А (4 картинки) и кнопка СТАРТ. Нажимаешь на кнопку и в ДИВ отображаются эти 4 элемента (картинки). Потом есть МАССИВ_Б (2 картинки в нем) и кнопка ДОБАВИТЬ. Нажимаешь на кнопку первый раз - картинка номер 3 должна пропасть из ДИВа, а вместо нее рандомно вставиться картинка из Массива_Б. Нажимаешь второй раз - картинка номер 4 пропадает из ДИВа, а вместо нее вставляется вторая картинка из Массива_Б. Что меня смущает... у меня есть ДИВ с изначально вставленными туда картинками ... как мне сделать поиск по этому диву, чтобы сначала заменить картинку номер 3, а потом номер 4? Мне кажется это нереально, а надо как-то заново перериовывать этот див ... что-то запутался... |
Ничего тут нереального нет.
поиск
document.querySelectorAll('div img')
рандомная картинка из массива Math.random()*arr.length; заменить или вставить можно функцией .replaceChild .appendChild .insertBefore |
Цитата:
var asd = document.body.querySelectorAll('div.imgArr > img');
alert(asd);
То есть я пытаюсь найти все элементы IMG (которые с массива я вывожу) в диве с классом .imgArr и ради интереса посмотрел, что мне алерт вывел. А вывел он [object nodeList] .. Это что такое? Хотя в конечно итоге мне надо получить сначала элемент номер 3, а потом 4 ... |
Цитата:
var asd = document.body.querySelectorAll('div.imgArr > img');
alert(asd[0]); // первый элемент
alert(asd[1]); // второй элемент
|
Цитата:
|
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<script>
var asd = document.querySelectorAll('div > img');
alert(asd[0]); // первый элемент
alert(asd[1]); // второй элемент
</script>
</body>
</html>
что-то делаете не так! :blink: |
Цитата:
или проверьте "div.imgArr > img" есть ли у вас дивы с классом imgArr с прямыми потомками img |
Цитата:
Попробовал теми функциями, что вы предложили (не совсем получилос, в коде кстати закомментированный код - это как я по-разному пытался). Сделал так, посмотрите плз, правильно ли так(но там есть одна проблема. У меня заменяется последняя картинка - ОК. Но если я хочу сначала заменить предпоследнюю, а потом последнюю, то не выходит). Код.
var arr = new Array("img/blue.jpg", "img/bline2.jpg", "img/close.png");
var arrRep = new Array("img/site.jpg", "img/x5.jpg");
function getImg(){
for(var i = 0; i < arr.length; i++){
document.getElementById("imgArr").innerHTML += "<img src=" + arr[i] + " />";
}
}
function replaceImg(){
var asd = document.querySelectorAll('div#imgArr > img');
var willBeReplace = asd[2].parentNode.removeChild(asd[2]);
//alert(asd[2]);
var addedElemen = arrRep[1];
document.getElementById("imgArr").innerHTML += "<img src=" + addedElemen + " />";
//var aaa = willBeReplace.replaceChild(addedElemen, willBeReplace.childNodes[0]);
//alert(willBeReplace);
// Create a new text node called "Water"
//var textnode = arrRep[1];
//alert(textnode);
// Get the first child node of an <ul> element
//var item = document.getElementById("imgArr").childNodes[2];
//alert(item);
//var item = document.querySelectorAll('div#imgArr > img');
//alert(item[2]);
// Replace the first child node of <ul> with the newly created text node
//document.getElementById("imgArr").innerHTML = item.replaceChild(textnode, item.childNodes[2]);
//alert(item);
<div class="animated" id="imgArr"> </div> <div> <input type="button" value="Start" OnClick="getImg();" /> <input type="button" value="Replace" OnClick="replaceImg();" /> </div> <div> |
Как советует один мой друг - учитесь сразу добавлять элементы правильно, чтобы в дальнейшем с кодом не было проблем!
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="animated" id="imgArr"></div>
<div>
<input type="button" value="Start" id="id"/>
<input type="button" value="Replace" id="id2"/>
</div>
<div>
<script>
var arr = ["img/blue.jpg", "img/bline2.jpg", "img/close.png"];
var arrRep = ["img/site.jpg", "img/x5.jpg"];
var el = document.getElementById('imgArr');
document.getElementById("id").addEventListener('click', function(e) {
for(var i=0; i<arr.length; i++ ){
var img = document.createElement('img');
img.src = arr[i];
el.appendChild(img);
this.removeEventListener(e.type, arguments.callee);
}
}, false);
</script>
</body>
</html>
вот так мы добавляем, дальше пробуйте сами сделать замену var rand = Math.floor(Math.random()*arrRep.length); arrRep[rand]; // Это случайный элемент второго массива синтаксис создания массива будет более компактный через литерал массива. |
| Часовой пояс GMT +3, время: 13:49. |