Question

我制作了按钮，根据一些参数改进搜索。

＆＃13;

var count = 1;
document.getElementById("families").addEventListener("click", changeText);
function changeText() {
   if (count == 0) {
       document.getElementById("families").innerHTML = "";
       document.getElementById("families").insertAdjacentHTML('afterbegin', "Zeige Angefragt");
       count = 1
   } else {
       document.getElementById("families").innerHTML = "";
       document.getElementById("families").insertAdjacentHTML('afterbegin', "Hide Angefragt");
       count = 0
   }
};
document.getElementById("families2").addEventListener("click", changeText2);
function changeText2() {
   if (count == 0) {
       document.getElementById("families2").innerHTML = "";
       document.getElementById("families2").insertAdjacentHTML('afterbegin', "Zeige Eingeteilt");
       count = 1
   } else {
       document.getElementById("families2").innerHTML = "";
       document.getElementById("families2").insertAdjacentHTML('afterbegin', "Hide Eingeteilt");
       count = 0
   }
};
document.getElementById("families3").addEventListener("click", changeText3);
function changeText3() {
   if (count == 0) {
       document.getElementById("families3").innerHTML = "";
       document.getElementById("families3").insertAdjacentHTML('afterbegin', "Zeige Abgesagt");
       count = 1
   } else {
       document.getElementById("families3").innerHTML = "";
       document.getElementById("families3").insertAdjacentHTML('afterbegin', "Hide Abgesagt");
       count = 0
   }
}

＆＃13;

可以清楚地看到，这是对所有三个按钮重复的相同功能。如何改进我的代码以将参数传递给函数而不是复制它？可能是我可以将我的ID和文本放在哈希中，然后相应地使用文本？我是javascript的新手。提前谢谢！

Answer 1

这应该可以解决问题

function changeTextClickHandler(elementId, showText, hideText) {
  return function() {
    if (count == 0) {
        document.getElementById(elementId).innerHTML = "";
        document.getElementById(elementId).insertAdjacentHTML('afterbegin', showText);
        count = 1
    } else {
        document.getElementById(elementId).innerHTML = "";
        document.getElementById(elementId).insertAdjacentHTML('afterbegin', hideText);
        count = 0
    }
  }
}
document.getElementById("families").addEventListener("click", changeTextClickHandler("families", "Zeige Angefragt", "Hide Angefragt"));
document.getElementById("families2").addEventListener("click", changeTextClickHandler("families2", "Zeige Eingeteilt", "Hide Eingeteilt"));
document.getElementById("families3").addEventListener("click", changeTextClickHandler("families3", "Zeige Abgesagt", "Hide Abgesagt"));

Answer 2

将querySelectorAll与属性选择器

一起使用

Array.from( document.querySelectorAll( "[id^='families']") ).forEach( s => {
   s.addEventListener( "click", e => {
      var el = e.currentTarget;
      if (count == 0) {
         el.innerHTML = "";
         el.insertAdjacentHTML('afterbegin', "Zeige Eingeteilt");
      } else {
         el.innerHTML = "";
         el.insertAdjacentHTML('afterbegin', "Hide Eingeteilt");
      }      
      count = (count + 1) % 2;
   })
})

重构：循环哈希（？）javascript

2 个答案: