javascript - 无法更改 javascript dom 中的嵌套 div

Question

我是 javascript 新手，在动态更改 html 中 anchor 标记的 onclick 属性时遇到问题。下面是我的代码:

function changeImage(){			

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

    var charCount = 0;

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

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

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

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

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

		</div>

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

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

		</div>
		
	</li>

</ul>

我打算做的是更改每个 <li> 的 onclick 函数元素。 session 变量$_SESSION['char_all']是php中的一个字典，其中key是 Angular 色名称(字符串)，value是我的数据库表中该 Angular 色名称对应的 Angular 色id。因此，理想情况下 <a> <li> 下的标签标签应获得 startChar('1', '1') 的 onclick 属性(对于字符 1)和 startChar('1', '2') (对于字符 2)。但是，我最终得到的是 startChar('1', '2')对于两个 Angular 色。

我哪里出错了？我忽略的可能是一些非常愚蠢的事情。但是，我无法弄清楚。所以，请帮帮我!

Answer 1

您的for in过程引用了key，它在迭代charAll时发生变化。 作为一种解决方案(未经测试)，您可能希望将函数包装在外部匿名函数中并将 key 传递给它:

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