如何在成对元素上应用相同的功能

Posted 2023-05-09

【中文标题】如何在成对元素上应用相同的功能

【英文标题】：How to apply the same function on paired elements

【发布时间】：2020-09-21 03:53:05

【问题描述】：

我有这段代码，我希望每个文本框输入都会更改其对应的图像。该函数本身对于列表中的所有合作伙伴都是典型的（txt 和 img）。我已经搜索并阅读了一些类似的帖子，但此时它超出了我的范围。如何在不多次复制的情况下使该功能正常工作？ 请提前帮助和感谢:)

HTML

<div id="sideleft">
<div class="pict" id="img01"></div>
<div class="pict" id="img02"></div>
<div class="pict" id="img03"></div>
<div class="pict" id="img04"></div>
<div class="pict" id="img05"></div>
<div class="pict" id="img06"></div>
<div class="pict" id="img07"></div>
<div class="pict" id="img08"></div>
<div class="pict" id="img09"></div>
</div>

<div id="sideright">
<input class="box" id="txt01" type="text" value="" onblur="change01()"/>
<input class="box" id="txt02" type="text" value="" onblur="change02()"/>
<input class="box" id="txt03" type="text" value="" onblur="change()"/>
<input class="box" id="txt04" type="text" value="" onblur="change()"/>
<input class="box" id="txt05" type="text" value="" onblur="change()"/>
<input class="box" id="txt06" type="text" value="" onblur="change()"/>
<input class="box" id="txt07" type="text" value="" onblur="change()"/>
<input class="box" id="txt08" type="text" value="" onblur="change()"/>
<input class="box" id="txt09" type="text" value="" onblur="change()"/>
</div>

function change01() 
var image = "";
var answers = document.getElementById("txt01").value;
switch(answers) 
case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>'; break;
 document.getElementById("img01").innerhtml = image;


function change02() 
var image = "";
var answers = document.getElementById("txt02").value;
switch(answers) 
case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>'; break;
 document.getElementById("img02").innerHTML = image;

CSS

#sideright, #sideleft
  float:left;
  width:180px;


#sideleft div
  float:left;
  border:1px solid red;
  width:55px;
  height:55px;

【参考方案1】：

非常简单，只需将参数传递给您的函数。这就是争论的目的。

写一个参数函数：

function change( num )  // <-- here num=='01' or '02'
    var image = "";
    var answers = document.getElementById("txt" + num ).value; // txt01, txt02
    switch(answers) 
         case "a": image='<img src="https://dummyimage.com/55X55/00a2ff/fff"></img>'; break;
         case "b": image='<img src="https://dummyimage.com/55X55/1eff00/fff"></img>'; break;
         case "c": image='<img src="https://dummyimage.com/55X55/ff0000/fff"></img>'; break;
         case "":  image='<img src="https://dummyimage.com/55X55/000000/fff"></img>'; break;
         default:  image='<img src="https://dummyimage.com/55X55/a3a3a3/fff"></img>';                            break;
     document.getElementById("img" + num ).innerHTML = image; // img01, img02

然后每次都用不同的参数调用它：

<input class="box" id="txt01" type="text" value="" onblur="change('01')"/>
<input class="box" id="txt02" type="text" value="" onblur="change('02')"/>