冲突的功能

这里的好人最近帮我用下面发布的一些JavaScript。但是，它似乎与网站上已有的另一个功能相冲突。由于我是一名后端程序员，对JavaScript知之甚少，有谁知道如何解决冲突？冲突的功能

function showhide(id) { 
    if (document.getElementById) { 
     var divid = document.getElementById(id); 
     var divs = document.getElementsByClassName('hide'); 
     var showElement = true; 
     if (divid.style.display === 'block') { 
      showElement = false; 
     } 
     for (var i = 0; i < divs.length; i++) { 
      divs[i].style.display = 'none'; 
     } 
     if (showElement) { 
      divid.style.display = 'block'; 
     } 
    } 
    return false; 
}

上面的代码与以下代码冲突，这是一个CAPTCHA的重载图标。没有错误，但只要其他代码存在，刷新就不会执行任何操作。请注意，上面的代码包含在整个网站中，并在其他几个页面上使用，而下面的代码仅用于其中的一个。

<img src="/common/quickcaptcha/imagebuilder.php" border="1" id="verification"> 
<a href="#" onclick="document.getElementById('verification').src='/common/quickcaptcha/imagebuilder.php?img=' + Math.random(); return false"> 
    <img src="/common/images/refreshicon.gif" width="22" height="22" border="0" title="Refresh Security Code"> 
</a>

来源

2017-08-12 DonP

当你设置事件侦听器与语法（.on{event} = ...），要覆盖该事件的任何先前设置的监听器。例如：

window.onload = function(){ console.log("A"); }; // Won't be executed 
 
window.onload = function(){ console.log("B"); };

相反，你应该添加一个事件侦听器，而不会影响其他人：

// Both of these will be executed 
 
window.addEventListener('load', function(){ console.log("A"); }); 
 
window.addEventListener('load', function(){ console.log("B"); });

来源

2017-08-12 19:36:48 blex

小心使用addEventListener，浏览器兼容性https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener – Laurianti

真，我经常忘记IE8和以下...我倾向于忽略这些旧的浏览器，因为Windows XP已停止维护。 – blex

您可以使用相同的逻辑的所有事件：

//function that already exists 
 
window.onload = function() { 
 
    console.log("A"); 
 
} 
 

 
//method to add multiple functions at "event" on a element (windows is default) 
 
var addOn = function (event, func, element) { 
 
    if (!element) { 
 
     element = window; 
 
    } 
 

 
    if (element.addEventListener) { 
 
     element.addEventListener(event, func); 
 
    } 
 
    else if (element.attachEvent) { 
 
     element.attachEvent('on' + event, func); 
 
    } 
 
    else { 
 
     var onevent = element['on' + event]; 
 

 
     element['on' + event] = function() { 
 
      if (onevent) { 
 
       onevent(); 
 
      } 
 

 
      func(); 
 
     } 
 
    } 
 
} 
 

 
//closure 
 
var addOnLoad = function (func, element) { 
 
    addOn('load', func, element); 
 
} 
 

 
//adding more new functions at onload 
 
addOnLoad(function() { 
 
    console.log("B"); 
 
}); 
 

 
addOnLoad(function() { 
 
    console.log("C"); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <img src="http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php" border="1" id="verification" /> 
 

 
    <br /> 
 

 
    <a href="#" onclick="document.getElementById('verification').src = 'http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php?img=' + Math.random(); "> 
 
     <img src="http://kinneygroup.com/wp-content/themes/Kinney-new/images/loading_arrows.gif" width="22" height="22" border="0" title="Refresh Security Code" /> 
 
    </a> 
 

 

 
    <div class="hide" style="display: none;">element hidden</div> 
 

 
    <script> 
 
     //method to add multiple functions at "event" on a element (windows is default) 
 
     var addOn = function (event, func, element) { 
 
      if (!element) { 
 
       element = window; 
 
      } 
 

 
      if (element.addEventListener) { 
 
       element.addEventListener(event, func); 
 
      } 
 
      else if (element.attachEvent) { 
 
       element.attachEvent('on' + event, func); 
 
      } 
 
      else { 
 
       var onevent = element['on' + event]; 
 

 
       element['on' + event] = function() { 
 
        if (onevent) { 
 
         onevent(); 
 
        } 
 

 
        func(); 
 
       } 
 
      } 
 
     } 
 

 
     //closure 
 
     var addOnLoad = function (func, element) { 
 
      addOn('load', func, element); 
 
     } 
 

 
     //closure 
 
     var addOnClick = function (func, element) { 
 
      addOn('click', func, element); 
 
     } 
 

 

 
     function showhide(obj, divs) { 
 
      var showFlag = true; 
 

 
      if (obj.style.display === 'block') { 
 
       showFlag = false; 
 
      } 
 
      for (let i = 0, max = divs.length; i < max; i++) { 
 
       divs[i].style.display = 'none'; 
 
      } 
 

 
      if (showFlag) { 
 
       obj.style.display = 'block'; 
 
      } 
 
     } 
 

 
     addOnLoad(function() { 
 
      var d = document; 
 
      var anchors = d.getElementsByTagName("a"); 
 
      var divs = d.getElementsByClassName("hide"); 
 

 
      for (let i = 0, len = anchors.length; i < len; i++) { 
 
       addOnClick(function() { 
 
        let e = divs[i]; 
 
        showhide(e, divs); 
 
       }, anchors[i]); 
 
      } 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

来源

2017-08-12 19:45:26 Laurianti

谢谢大家！我会试试这些想法。只是为了澄清，现有的函数并不比我所展示的多 - 也就是说，它是对内置JavaScript函数的内联调用，而另一个函数是独立函数。 – DonP

我试图应用这个，但不确定特别是在内联函数中的确切语法。 – DonP

你能发表一些代码吗？ – Laurianti

回答

相关问题