Невозможно изменить вложенный div в javascript dom

Question

Я новичок в javascript, и мне приходится сталкиваться с проблемами динамического изменения атрибута onclick тега привязки в html. Ниже мой код:

function changeImage(){ \t \t \t 
 

 
    var charAll = <?php echo json_encode($_SESSION['char_all']); ?>; 
 

 
    var charCount = 0; 
 

 
    for (var key in charAll) { 
 
\t \t \t \t \t \t 
 
\t var charDiv = document.getElementById(key); 
 
\t 
 
\t var anchorTag = charDiv.getElementsByTagName('a')[0]; 
 

 
     anchorTag.onclick = function(){startChar('1', charAll[key].toString());}; 
 
    } 
 
}

<ul id="portfolio-list" data-animated="fadeIn"> 
 

 
    <li id="character1"> 
 
\t \t <img src="character1.jpg" width="250px" height="280px" alt="" /> 
 
\t \t <div class="portfolio-item-content"> 
 
\t \t \t <span class="header">Play!</span> 
 
\t \t \t <p class="body"></p> 
 
\t \t </div> 
 
\t \t <a href="#" onclick="startChar('1', '1')"><i class="more">></i></a> 
 

 
\t \t <div class="post-info"> 
 
\t \t \t <div class="post-basic-info"> 
 
\t \t \t \t <h3 class="text-center">Character 1</h3> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 

 
\t </li> 
 
\t 
 
\t <li id="character2"> 
 
\t \t <img src="character2.jpg" width="250px" height="280px" alt="" /> 
 
\t \t <div class="portfolio-item-content"> 
 
\t \t \t <span class="header">Play!</span> 
 
\t \t \t <p class="body"></p> 
 
\t \t </div> 
 
\t \t <a href="#" onclick="startChar('1', '1')"><i class="more">></i></a> 
 

 
\t \t <div class="post-info"> 
 
\t \t \t <div class="post-basic-info"> 
 
\t \t \t \t <h3 class="text-center">Character 2</h3> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t \t 
 
\t </li> 
 

 
</ul>

То, что я намерен делать это, чтобы изменить функцию OnClick каждого из <li> элементов. Переменная сеанса $_SESSION['char_all'] - это словарь в php, где ключ - это имя символа (строка), а значение - это идентификатор символа, соответствующий имени символа в моей таблице базы данных. Итак, в идеале теги <a> под тегами <li> должны получить атрибут onclick startChar('1', '1') (для символа 1) и startChar('1', '2') (для символа 2). Но в итоге у меня есть startChar('1', '2') для обоих персонажей.

Куда я иду не так? Это может быть что-то очень глупое, что я пропускаю. Но я не могу понять. Итак, пожалуйста, помогите мне!

Answer 1

Ваша for in процедура ссылается на key, которая изменяется при повторении торого charAll. Как решение (не проверено), вы можете обернуть функцию во внешней анонимной-функции и передать key к нему:

(function(currentKey) { 
    anchorTag.onclick = function(){startChar('1', charAll[currentKey].toString());}; 
})(key);