Question

我正在制作一个名为“英雄联盟”的游戏的小型网站，它可以比较对战数据（冠军对抗某些冠军计数器）并在网页上打印出结果。我正在使用这个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文件名的第一部分？

Answer 1

您可以使用PHP执行此操作。首先，创建所有冠军的列表：

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

然后执行explode分隔每个冠军并将其存储为数组中的元素：

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

现在，您可以使用for循环来echo所需的结果：

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

最后，结果将是这样的：

<a href="#" onClick="aatroxweak()"><!--other stuff here--></a>
<a href="#" onClick="ahriweak()"><!--other stuff here--></a>

等等。我希望这是你正在寻找的。

Answer 2

您是否使用过jQuery .replaceWith();？

描述：用匹配替换匹配元素集中的每个元素提供的新内容并返回该元素集除去。

或直接的javascript方式（我在90％以上的时间里与jQuery结合使用）.replace();

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

Answer 3

在我看来，您应该选择不同的方法。在javascript中，您还可以使用javascript函数document.createElement(string tagName)动态生成HTML。

因此，两个可能的灵魂之一就是为每个冠军创造一个带有新事件的新图像：

HTML：

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

JS：

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);
}

但实际上，你应该为冠军使用全局函数，你应该在我使用的champions中定义冠军统计数据。在这种情况下：

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);
}

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

3 个答案:

HTML：

JS：