Question

我有一个包含7个选项卡和7个函数的菜单来触发onClick事件，但是现在我的函数是静态的。如何使代码更短更动态？

代码来源（一个TAB的示例） https://www.w3schools.com/howto/howto_js_dropdown.asp

从1到7的功能

  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

//for etc... up to 7

function myFunction7() {
    document.getElementById("myDropdown2").classList.toggle("show2");
}

onClick事件从1到7

window.onclick = function(event) {


  matches = event.target.matches ? event.target.matches('.dropbtn, .fa-briefcase') : event.target.msMatchesSelector('.dropbtn, .fa-briefcase');
    if (!matches) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }


// etc up to 7

matches = event.target.matches ? event.target.matches('.dropbtn7, .fa-motorcycle') : event.target.msMatchesSelector('.dropbtn7, .fa-motorcycle');
    if (!matches) {
        var dropdowns = document.getElementsByClassName("dropdown-content7");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show7')) {
                openDropdown.classList.remove('show7');
            }
        }
    }



// end of click event

}

Answer 1

评分

首先，我假设您是JavaScript的新手，如果您不是，那么我不知道该说些什么，但让我们说你是。首先，这是一种可怕的做事方式。其他脚本不仅可以将事件分配给窗口单击事件，这可能会导致代码出现严重错误，但将事物暴露给全局范围非常糟糕。

我建议你看一下将事物封装到对象中，就像我在下面的例子中所做的那样，然后你看看JavaScript模块设计模式，相信我，它会得到回报。

我的解决方案

正如您在下面的代码中所看到的，我已经为各个dom元素分配了事件，这使事件处理程序更容易维护，我也发现它使代码更加整洁。

当然，我定义的对象EventHandlerObject的初始代码，一目了然看起来很笨重，但是由于使用了关键字prototype，您可以添加并扩展尽可能多地使用对象，您甚至可以创建一个对象，以便它可以动态添加某些功能/特性。

＆＃13;

function EventHandlerObject() {
  // basic singleton implementation 
  if (EventHandlerObject.instance !== null 
  	&& typeof EventHandlerObject.instance !== "undefined") {
  	return this.instance;
  } else { EventHandlerObject.instance = this; }
}


EventHandlerObject.prototype.action = function (obj, eventType, callback) {
  if (typeof obj === "undefined" || obj === null) { return; }
  if (obj.length || obj instanceof Array) {
    for (var i = 0, s = obj.length; i < s; i++) {
      var elm = obj[i];
      try { // try to remove the event
        if (elm.removeEventListener) { elm.removeEventListener(eventType, callback, false); }
        else { elm[eventType + callback] = null; }
      } catch (e) { console.log(e); }

      try { // try to add the event and callback
        if (elm.addEventListener) { elm.addEventListener(eventType, callback, false); }
        else if (elm.attachEvent) { elm.attachEvent('on' + eventType, callback); }
        else { elm["on"+eventType] = callback; }
      } catch (e) { console.log(e); }
    }
  } else {
    try { // try to remove the event
      if (obj.removeEventListener) { obj.removeEventListener(eventType, callback, false); }
      else { obj[eventType + callback] = null; }
    } catch (e) { console.log(e); }

    try { // try to add the event and callback
      if (obj.addEventListener) { obj.addEventListener(eventType, callback, false); }
      else if (obj.attachEvent) { obj.attachEvent('on' + eventType, callback); }
      else { obj["on"+eventType] = callback; }
    } catch (e) { console.log(e); }
  }
};


var elms = document.querySelectorAll(".dropbtn, .fa-briefcase");
var events = new EventHandlerObject();
events.action(elms, "click", function(){
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
});


var otherElms = document.querySelectorAll(".dropbtn7, .fa-motorcycle");
events.action(otherElms, "click", function(){
  var dropdowns = document.getElementsByClassName("dropdown-content7");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show7')) {
      openDropdown.classList.remove('show7');
    }
  }
});

＆＃13;

Additionals

我建议你做很多学习，我发现从头开始学习JavaScript的好地方是MDN。当我试图从设计模式到使用API等从头开始学习一切时，我个人认为它是学习的特殊来源，它不仅教你如何做某些事情，但它也告诉你什么浏览器支持什么功能，这是一个漂亮的功能，特别是当你想要尽快找到而不是测试/做额外的研究。

点击功能JS make动态

1 个答案:

评分

我的解决方案

Additionals