Question

我有3个Div ids作为“衬衫”，“连帽衫”，“其他” 然后我有一个JavaScript函数。我如何能够为所有这3个ID使用相同的Js函数？

function myAccFunc() {
  var x = document.getElementById("divID");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}

Answer 1

function myAccFunc(id){
  var x = document.getElementById(id);
  if( !x ) return;

  if (x.className.indexOf("w3-show") == -1)
    x.className += " w3-show";
  else
    x.className = x.className.replace(" w3-show", "");
}  


['id1', 'id2', 'id3'].forEach(myAccFunc);

您可能对使用classList（ES2015）感兴趣。除了旧IE之外，它得到了很好的支持。

Answer 2

尝试将另一个类添加到要编辑的div中，然后调用它。此外，为什么在使用indexOf

时使用includes来检查是否存在

var x = document.getElementsByClass('checkClass');
for (i=0;i<x.length - 1;i++){
   if (!x[i].className.includes("w3-show")){
      x[i]className += " w3-show";
   } else {
     x[i].className = x.className.replace(" w3-    show", "");
   }
}

Answer 3

调用此函数：

myAccFunc("shirts");
myAccFunc("hoodies");
myAccFunc("other");

以及这种方式的功能：

function myAccFunc(div){
    var x = document.getElementById(div);
    if (x.className.indexOf("w3-show") == -1){
        x.className += " w3-show";
    }else{
        x.className = x.className.replace(" w3-show", "");
    }
}

Answer 4

我假设你不想默认显示所有这些

您可以将div_id作为参数传递，然后使用事件侦听器为每个div调用函数。

func myAccFunc(div_id){
   var x = document.getElementById(div_id);
   // rest of your code here
}

// event listeners
document.getElementById("show_shirts_btn").addEventListener("click", function(){ 
         myAccFunc(shirts) 
    });

document.getElementById("show_hoodies_btn").addEventListener("click", function(){ 
         myAccFunc(hoodies) 
    });


document.getElementById("show_other_btn").addEventListener("click", function(){ 
         myAccFunc(other) 
    });

多个div id的一个Javascript函数

4 个答案: