如何简化这个JS函数

How to simplify this JS function

本文关键字：JS 函数 何简化      更新时间：2023-09-26

是否可以将这两个功能合二为一?

我尝试在一个函数中使用多个选择器，但没有工作结果。

我不熟悉香草JS。提前感谢!

document.addEventListener('DOMContentLoaded', function() {
   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#closedview');
    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
    }
});
document.addEventListener('DOMContentLoaded', function() {
   var radioButtons = document.getElementsByName('viewangle');
   var paragraph = document.querySelector('#openedview');
    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
    }
});

尝试调用两个段落1 (closedview)和2 (openedview):

document.addEventListener('DOMContentLoaded', function() {
    var radioButtons = document.getElementsByName("viewangle");
    var paragraph1 = document.getElementById("closedview");
    var paragraph2 = document.getElementById("openedview");
    for(var i=0;i< radioButtons.length;i++){
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){
            console.log(paragraph1);
            console.log(paragraph2);
            if(paragraph1.className){ paragraph1.className = this.value; }else{ paragraph1.classList.add(this.value); }
            if(paragraph2.className){ paragraph2.className = this.value; }else{ paragraph2.classList.add(this.value); }
        }
        ,false);
    }
});

将普通的内容放在一个函数中，并将差异作为参数传递，如下所示:

document.addEventListener('DOMContentLoaded', function() {
  myFunction('#closedview');
});
document.addEventListener('DOMContentLoaded', function() {
  myFunction('#openedview');
});
function myFunction(viewId) {
  var radioButtons = document.getElementsByName('viewangle');
  var paragraph = document.querySelector(viewId);
  for(var i=0;i< radioButtons.length;i++) {
    var elem = radioButtons[i];
    elem.addEventListener('change',function(e){
      console.log(paragraph);
      if(paragraph.className) {
        paragraph.className = this.value;
      } else {
          paragraph.classList.add(this.value);
      }
    });
  }
}

或者与@RobG的答案结合:将document.querySelector()的结果传递给myFunction()。

PS: @Federico的答案实际上更清晰更好:你只需要添加一个eventlistener..DOMContentLoaded

内
相关文章：