Question

我想要一个函数，该函数将根据元素本身的innerHTML用具有特定字符串的ID替换元素的innerHTML。我目前有4个具有不同ID的元素，并且每个元素都有一个排序功能。由于这4个函数执行完全相同的操作，并根据相同的条件用完全相同的字符串替换innerHTML，是否有可能使1个函数同时适用于所有元素而不是4个？（每个函数测试160个不同的值，这意味着它们每个包含160个<button>+</button>语句...其中有4个使代码看起来不必要地长）

下面是代码示例（每个元素具有3个不同的条件，而不是160个）：

if

Answer 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-您可以为每个元素指定一个类名，然后关联第n个{{1 }}和第n个object。在这里ID不太合适-例如：

extra

然后选择每对，以便您可以对它们进行任何操作：

<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>

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

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

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

4 个答案: