1个函数独立替换4个不同ID的innerHTML

Question

我想要一个函数，该函数将根据其自身的 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>

Answer 1

你可以试试这个；

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

Answer 2

一个选择是制作一个高阶函数 - 您可以将对象的 ID 和相关额外信息传递给该函数：

const makeChangeHTML = (objSel, extSel) => {
  const ob = document.getElementById(objSel);
  const ex = document.getElementById(extSel);
  return () => {
    // do tests, assign to `ex`

但是，如果您使用对象作为 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;
  }
}

然后您可以通过使用适当的 select 或

调用 makeChangeHTML 来创建一个函数

const change1 = makeChangeHTML('object1', 'extra1');
const change2 = makeChangeHTML('object2', 'extra2');

但是，如果可能的话，最好也更改您的 HTML - 您可以为每个元素指定一个 class 名称，而不是为每个元素使用单独的 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>

然后 select 每对，这样你就可以用它们做任何你想做的事了：

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

Answer 3

我认为你需要重新考虑这个问题。您可以使用对象而不是使用条件检查。

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

Answer 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

1 function to replace innerHTML of 4 different ID independently

html

javascript

function

innerhtml