Javascript 用代码的其他部分替换部分代码的简单方法

我正在为一款名为“传奇联盟”的游戏制作一个小网站，该网站比较比赛数据（冠军对某个冠军的计数），并在网页上打印结果。我使用这个html代码，通过

onClick（）

显示人物肖像，使他们在单击时启动一个函数

<a href="#" onClick="tristanaweak()"><img src="portraits/Aatrox_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Ahri_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Akali_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Alistar_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Amumu_Square_0.png" width="25px" height="25px" alt=random></img>

我已经手动输入了图片文件名（这非常繁琐），但我仍然必须用冠军名称（aatroxweak、ahriweak等）重命名

onclick（）

值（tristanaweak）。我想用一个循环来编辑文本，但我不知道该怎么做

---

我对使用Javascript相当陌生，有没有一种简单的方法可以将html代码中的所有

onClick=“tristanaweak（）”

重命名为同一行中png文件名的第一部分？

您可以使用PHP来实现这一点。首先，创建所有冠军的列表：

$champs = "aatrox,arhi,akali,alistar,amumu,...";

然后进行分解，将每个冠军分开，并将其存储为数组中的一个元素：

$pieces = explode(",", $champs);
echo $pieces[0]; //this will return aatrox
echo $pieces[1]; //this will return ahri

现在，您可以使用

for

循环

回显所需结果：

for($i=0;$i<count($pieces);$i++) {
    echo '<a href="#" onClick="'.$pieces[$i].'weak()"><!--other stuff here--></a>';
}

对于（$i=0；$i您是否使用过jQuery
.replaceWith（）；
？

描述：将匹配元素集中的每个元素替换为
提供了新内容，并返回所提供的元素集
删除

或者使用
.replace（）；

replace（）方法在字符串中搜索指定的值或
正则表达式，并返回一个新字符串，其中
值被替换

在我看来，您应该选择不同的方法。在javascript中，您还可以使用javascript函数
document.createElement（字符串标记名）
动态生成HTML

因此，两个可能的解决方案之一是为每个冠军创造一个新的形象和新的事件：

HTML:
看起来每个Champion都有一个单独的函数？为什么要这样做？你应该有一个函数，它将Champion作为参数，并返回该Champion的弱点的某种形式的数据，或者以你想要的方式返回。我尝试了这段代码，但循环似乎不起作用。回音在循环外起作用，但循环不打印任何内容我对PHP不是很熟悉，我需要更改代码的一部分吗？不，它应该按原样工作。试着回显count（$pieces），看看数组中有多少元素。这个数字是你期望的吗？
<a href="#" onClick="aatroxweak()"><!--other stuff here--></a>
<a href="#" onClick="ahriweak()"><!--other stuff here--></a>

<div id="hero_images">
</div>

var champions = [
   {
     name: "Veigar", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   },
   {
     name: "Vladimir", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   },
   {
     name: "Morgana", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   }
];
//Now lets make an image for every champion:
var container = document.getElementById("hero_images"); //We'll put images in div I've defined in HTML above
for(var i=0; i<champions.length; i++) {  //Loop through "champions" which is an array
  var a = document.createElement("a");
  a.href="#";
  a.onclick = champions[i].callback;  //Assign function from champion list to this <a>
  //Also create the image
  var img = document.createElement("img");
  img.src = "portraits/"+champions[i].name+"_Square_0.png"; //I suppose image always have champion name in beginning
  img.alt = champions[i].name; //Alternative text for no-image users
  //Append image to link:
  a.appendChild(img);
  //Append <a> to <div>
  contained.appendChild(a);
}

var champions = [
   {
     name: "Veigar", 
     stats: {
        inteligence: 666,
        strength: 1,
        /*..whatever you use...**/
     }
   }
];

for(/**imagine the prewious code here**/) {
   ...
   a.onclick=(function(i) {
     ShowHeroStatsOrWhatever(champions[i]);
   })(i); 
   ...
}
function  ShowHeroStatsOrWhatever(champion) {
    alert("Champions intelligence is "+champion.stats.inteligence);
}