衝突的功能

這裏的好人最近幫我用下面發佈的一些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

回答

相關問題