1个函数独立替换4个不同ID的innerHTML
Posted
技术标签:
【中文标题】1个函数独立替换4个不同ID的innerHTML【英文标题】：1 function to replace innerHTML of 4 different ID independently 【发布时间】：2019-01-16 09:31:56 【问题描述】：我想要一个函数，它将一个元素的 innerhtml 替换为一个带有特定字符串的 ID，具体取决于它自己的 innerHTML。我目前有 4 个具有不同 ID 的元素，并且我对每个元素都有一个排序功能。由于这 4 个函数做完全相同的事情并根据相同的条件用完全相同的字符串替换 innerHTML，是否有可能使 1 个函数同时适用于所有元素而不是 4 个？ （每个函数测试 160 个不同的值，这意味着它们每个都包含 160 个 if 语句......其中有 4 个会使代码看起来不必要地冗长）
这是一个代码示例（每个元素有 3 个不同的条件而不是 160 个）：
<body>
<div id="object1">10</div>
<div id="object2">10</div>
<div id="object3">10</div>
<div id="object4">10</div>
<div id="extra1"></div>
<div id="extra2"></div>
<div id="extra3"></div>
<div id="extra4"></div>
<script>
function changeHTML1()
var ob1 = document.getElementById("object1");
var ex1 = document.getElementById("extra1");
if (ob1.innerHTML == "10")
ex1.innerHTML = "D5";
if (ob1.innerHTML == "9")
ex1.innerHTML = "1-D4";
if (ob1.innerHTML == "8")
ex1.innerHTML = "D4";
function changeHTML2()
var ob2 = document.getElementById("object2");
var ex2 = document.getElementById("extra2");
if (ob2.innerHTML == "10")
ex2.innerHTML = "D5";
if (ob2.innerHTML == "9")
ex2.innerHTML = "1-D4";
if (ob2.innerHTML == "8")
ex2.innerHTML = "D4";
function changeHTML3()
var ob3 = document.getElementById("object3");
var ex3 = document.getElementById("extra3");
if (ob3.innerHTML == "10")
ex3.innerHTML = "D5";
if (ob3.innerHTML == "9")
ex3.innerHTML = "1-D4";
if (ob3.innerHTML == "8")
ex3.innerHTML = "D4";
function changeHTML4()
var ob4 = document.getElementById("object4");
var ex4 = document.getElementById("extra4");
if (ob4.innerHTML == "10")
ex4.innerHTML = "D5";
if (ob4.innerHTML == "9")
ex4.innerHTML = "1-D4";
if (ob4.innerHTML == "8")
ex4.innerHTML = "D4";
</script>
</body>
【问题讨论】：
您的功能目前完全相同，为什么不删除除一个之外的所有功能并参考那个？ 抱歉，我正在复制粘贴代码的类似部分。让我编辑一下，让它正确... 【参考方案1】：一种选择是创建一个高阶函数 - 您可以将对象的 ID 和其他问题传递给该函数：
const makeChangeHTML = (objSel, extSel) =>
const ob = document.getElementById(objSel);
const ex = document.getElementById(extSel);
return () =>
// do tests, assign to `ex`
但是，如果您使用 object 来表示object 的可能值并将相应的值放入extra，这可能会更容易，而不是一些非常冗长的 if 语句：
const extraIndexedByObj =
'10': 'D5',
'9': '1-D4',
'8': 'D4',
;
const makeChangeHTML = (objId, extId) =>
const ob = document.getElementById(objId);
const ex = document.getElementById(extId);
return () =>
const textContent = ob;
const extraVaue = extraIndexedByObj[textContent];
if (extraVaue !== undefined) ex.textContent = extraVaue;
然后您可以通过使用适当的选择器调用makeChangeHTML 创建一个函数：
const change1 = makeChangeHTML('object1', 'extra1');
const change2 = makeChangeHTML('object2', 'extra2');
但是，如果可能的话，最好也更改您的 HTML - 您可以为每个元素指定一个类名，而不是为每个元素使用单独的 ID，然后关联第 n 个 object与第 n 个extra。 ID 在这里并不合适——例如：
<div class="object">10</div>
<div class="object">10</div>
<div class="object">10</div>
<div class="object">10</div>
<div class="extra"></div>
<div class="extra"></div>
<div class="extra"></div>
<div class="extra"></div>
然后选择每一对，这样你就可以对它们做任何你需要做的事情：
const objects = document.querySelectorAll('.object');
const extras = document.querySelectorAll('.extra');
objects.forEach((object, i) =>
const extra = extras[i];
// do something with each `object` and each `extra`
);
【讨论】：
是的，使用对象而不是 if 语句的想法更有意义。谢谢！【参考方案2】：我认为你需要重新考虑这个问题。您可以使用对象来代替条件检查。
var lookup =
"10" : "D5",
"9" : "1-D4",
"8" : "D4"
;
function doCheck(inElemId, outElemId)
var in = document.getElementById(inElemId);
var out = document.getElementById(outElemId);
var key = in.textContent.trim();
if (lookup.hasOwnProperty(key))
// the lookup object contains the 'key'
out.textContent = lookup[key];
如果元素 ID 是增量数值，您可以使用循环。
[1,2,3,4].forEach(function(ix)
doCheck('object'+ix, 'extra'+ix);
);
【讨论】：
【参考方案3】：你可以试试这个；
function changeHTML()
var i;
var numberOfElements = 4;
for (i = 1; i <= numberOfElements; i++)
var ob = document.getElementById("object"+i);
var ex = document.getElementById("extra"+i);
if (ob.innerHTML == "10")
ex.innerHTML = "D5";
if (ob.innerHTML == "9")
ex.innerHTML = "1-D4";
if (ob.innerHTML == "8")
ex.innerHTML = "D4";
【讨论】：
太棒了！非常感谢！【参考方案4】：对于更具可扩展性的解决方案，请使用 querySelectorAll
function changeHtml()
//Get all elemtents which have an id that starts with "object"
var sourceElements = document.querySelectorAll("[id^='object']");
for(var i = 0; i < sourceElements.length; i++)
var value = sourceElements[i].innerHTML;
var suffix = sourceElements[i].id.replace("object","");
var target = document.getElementById("extra" + suffix);
//A switch is better than multiple ifs
//This could also be easily replace with an object based
//solution similar to that in other answers.
switch(value)
case "10":
target.innerHTML = "D5";
break;
case "9":
target.innerHTML = "1-D4";
break;
case "8":
target.innerHTML = "D4";
break;
changeHtml(); <div id="object1">10</div>
<div id="object2">9</div>
<div id="object3">8</div>
<div id="object4">10</div>
<div id="extra1"></div>
<div id="extra2"></div>
<div id="extra3"></div>
<div id="extra4"></div>
【讨论】：
以上是关于1个函数独立替换4个不同ID的innerHTML的主要内容，如果未能解决你的问题，请参考以下文章
是否有一个 Excel 函数或脚本来查找和替换两个不同工作表中匹配的字段，并将其替换为第二个工作表中包含的另一个数据？