是否有一个更干净，更可重复的方式来编码这个onclick?

Question

我正在编写许多行这些圆圈是基于单击功能可填充的。想象一个表单，您可以在其中填写一定数量的这些来表示属性的级别(这些是用于和RPG角色表)。所以在所有属性和字符之间有数百行这样的字符。编辑:客户给了我两个图像来使用这个，一个空的圆圈和一个填满的圆圈。
下面是我如何编写两行圆的代码:

<div style="position:absolute;left:130.47px;top:155.30px" class="cls_005"><span class="cls_005">Intelligence</span></div>
<div style="position:absolute;left:213.52px;top:144.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange" onclick="changeImage()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange2" onclick="changeImageTwo()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange3" onclick="changeImageThree()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange4" onclick="changeImageFour()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange5" onclick="changeImageFive()"  />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageTwo() {
if (document.getElementById("imgClickAndChange2").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange2").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange2").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageThree() {
if (document.getElementById("imgClickAndChange3").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange3").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange3").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageFour() {
if (document.getElementById("imgClickAndChange4").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange4").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange4").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageFive() {
if (document.getElementById("imgClickAndChange5").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange5").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange5").src = "https://i.imgur.com/QJVkq9A.png";
}
}
</script></span></div>
<div style="position:absolute;left:600.48px;top:155.30px" class="cls_005"><span class="cls_005">Strength</span></div>
<div style="position:absolute;left:650.53px;top:157.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange6" onclick="changeImageSix()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange7" onclick="changeImageSeven()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange8" onclick="changeImageEight()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange9" onclick="changeImageNine()"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" id="imgClickAndChange10" onclick="changeImageTen()"  />
</p>
<script language="javascript">
function changeImageSix() {
if (document.getElementById("imgClickAndChange6").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange6").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange6").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageSeven() {
if (document.getElementById("imgClickAndChange7").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange7").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange7").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageEight() {
if (document.getElementById("imgClickAndChange8").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange8").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange8").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageNine() {
if (document.getElementById("imgClickAndChange9").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange9").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange9").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageTen() {
if (document.getElementById("imgClickAndChange10").src == "https://i.imgur.com/QJVkq9A.png") 
{
document.getElementById("imgClickAndChange10").src = "https://i.imgur.com/8apyMiH.png";
}
else 
{
document.getElementById("imgClickAndChange10").src = "https://i.imgur.com/QJVkq9A.png";
}
}
</script></span></div>

如你所见，有很多行代码。希望能有个简化的方法。谢谢你的建议。

Answer 1

使用内联事件处理程序通常不是一个好主意。您可以为文档使用一个处理程序，并使用通用处理程序(事件委托)。在本例中，类似于给定的代码片段。在代码片段中，data-attribute用于识别图像

document.addEventListener("click", changeImage);
function changeImage(evt) {
const origin = evt.target;
if (origin.dataset.togglesrc) {
const swap = {"8apyMiH.png": "QJVkq9A.png", "QJVkq9A.png": "8apyMiH.png"};
const imgRoot = origin.src.substr(0, origin.src.lastIndexOf("/"));
const currentImg = origin.src.split("/").slice(-1);
origin.src = `${imgRoot}/${swap[currentImg]}`;
}
}

body {margin: 2rem;}

<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange6" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange7" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange8" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange9"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange10" />

或者，您可以创建一个更通用的工厂函数，它返回一个处理程序并接收图像文件名作为参数:

document.addEventListener("click", swapper("JouzaLc.png", "rgqRxiB.png"));
function swapper(...images) {
const swap = {
[images[0]]: images[1],
[images[1]]: images[0],
};
// return a listener function
// the function uses the 'closed over' [swap] variable
return evt => {
const origin = evt.target;
if (origin.dataset.imageId) {
const imgRoot = origin.src.substr(0, origin.src.lastIndexOf("/"));
const currentImg = origin.src.split("/").slice(-1).pop();
origin.src = `${imgRoot}/${swap[currentImg]}`;
console.clear();
console.log(`You clicked image ${origin.dataset.imageId}, its src is now ${
swap[currentImg]}`);
}
}
}

body {
margin: 2rem;
}
img {
width: 50px;
height: auto;
}

<p>
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="11" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="2" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="23" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="46" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="15" />
</p>

另一个想法可能是也使用data-attibutes来交换图像。这个可以在JsBin

中找到

Answer 2

听起来您需要更好地使用函数参数。你所有的函数都在做同样的事情，使用不同的参数——在你的例子中，参数是一个元素的ID和两个图像的url。

函数的意义不只是封装一些代码(比如，把一段代码分成一个块，就像你现在做的那样)，而是接受一些输入(参数)，对其进行操作，然后返回一些输出。

在您的例子中，您可能会考虑这样的函数:

const changeImageSrc = function(imageID, oldURL, newURL){
const image = document.getElementById(imageID)
if(image.src === oldURL){
image.src = newURL
}
}

现在你可以随意调用这个函数，每次都传递相关的参数:

changeImageSrc("imgClickAndChange10", "https://i.imgur.com/QJVkq9A.png", "https://i.imgur.com/8apyMiH.png")
changeImageSrc("imgClickAndChange9", ...)

你也可以做其他的改变，比如将所有的url/id存储在一个数组中，或者如果你以某种方式设置你的HTML，甚至可以使用document.getElementsByClassName来获取它们，然后循环使你的生活更容易-但那是另一回事。

Answer 3

如果您对所有图像使用相同的功能，则只需要一个函数，您可以将this的DOM HTML元素作为参数传递，例如:

<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />

调整后的函数看起来像这样:

function changeImage(element) {
const src = element.src
src == "https://i.imgur.com/QJVkq9A.png" ? element.src = "https://i.imgur.com/8apyMiH.png" : element.src = "https://i.imgur.com/QJVkq9A.png";
}

你的代码看起来像这样:

<script language="javascript">
function changeImage(element) {
const src = element.src
src == "https://i.imgur.com/QJVkq9A.png" ? element.src = "https://i.imgur.com/8apyMiH.png" : element.src = "https://i.imgur.com/QJVkq9A.png";
}
</script>
<div style="position:absolute;left:130.47px;top:155.30px" class="cls_005"><span class="cls_005">Intelligence</span></div>
<div style="position:absolute;left:213.52px;top:144.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
</p>
</span></div>
<div style="position:absolute;left:600.48px;top:155.30px" class="cls_005"><span class="cls_005">Strength</span></div>
<div style="position:absolute;left:650.53px;top:157.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" 
style="height: 10px; width: 10px" onclick="changeImage(this)"  />
</p>
</span></div>