任何方式來減少所需的togTriggers的數量？

我正在使用以下腳本在鼠標懸停並單擊時打開一個框。在我的頁面上有很多可以打開的盒子，還有更多。我可以使這些盒子工作的唯一方法是爲每個盒子做一個新的togTrigger。即使同一個單詞在頁面上的不同位置打開同一個框，我需要一個新的togTrigger。最終我會以toGTrigger1結束togTrigger200或其他事情。這不是很實際。有什麼辦法可以減少需要的觸發器數量？任何方式來減少所需的togTriggers的數量？

<script type="text/javascript"> 
    <!-- HIDE FROM OLD BROWSERS 
    /* <![CDATA[ */ 

    var oVTog = { 
     toggle: function (el) { 
      var container = el.parentNode; 
      var para = container.getElementsByTagName('p')[0]; 
      para.style.display = "none"; 

      var isClicked = false; 

      el.onmouseover = function() { 
       para.style.display = ''; 
       return false; 
      }; 
      el.onmouseout = function() { 
       if (!isClicked) 
        para.style.display = 'none'; 
       return false; 
      }; 
      el.onclick = function() { 
       // if it's clicked, change it to TRUE 
       // if it's clicked again, change it back to FALSE 

       isClicked = !isClicked; // toggle 

       para.style.display = ((isClicked) ? '' : 'none'); 
       return false; 
      }; 
     } 
    }; 
    window.onload = function() { 
     var l = document.getElementById('togTrigger'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger2'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger3'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger4'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger5'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger6'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger7'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger8'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger9'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger10'); 
     oVTog.toggle(l); 
     l = document.getElementById('togTrigger11'); 
     oVTog.toggle(l); 
    }; 

    /* ]]> */ 
    //END HIDING --> 
</script>

我這是怎麼應用專區內體內的腳本（頁面做出來很多的div的表內，/ p應該不會是一個div內，雖然，但它工作）：

<a href="#" id="togTrigger"><i>text</i></a> 
     <p class="togContent"> 
     text 
     </p>

當有同一div內的兩個或多個文本框，其他togTriggers是一個跨度內：

<span><a href="#" id="togTrigger4"><i>text</i></a> 
     <p class="togContent"> 
     text 
     </p></span>

來源

2013-03-21 Martijn

怎麼樣按班級而不是ID選擇？也就是說，如果你將所有的id ='togTriggerXX'元素放入class ='togTrigger'中，會發生什麼。然後你可以使用document.querySelectorAll（'。togTrigger'）或document.getElementsByClassName（'togTrigger'）（第一個好處是你可以在容器元素上調用它，所以你只需要定位它所包含的元素。也可以在文檔元素上調用它，使用'#idContainer .toggleTriggerClassName'）然後您將獲得一個nodeList。您可以遍歷列表，在每個元素上調用oVTog.toggle。 – enhzflep 2013-03-21 10:57:04

我需要一個代碼示例，因爲我對javascript的知識非常有限 – Martijn 2013-03-21 11:12:13

正如我所提及的，正如馬特更清楚地指出的那樣，您可以以編程方式訪問這些元素 - 不需要通過名稱來引用它們。這裏有一些代碼可以做到這一點。（您可以忽略第一個腳本標記的第一個內容 - 它們是我的'blank.html'文件中的輔助函數 - 所有（我的）頁面都從中增長的文件）

Javascript陣列爲您提供forEach函數，不幸的是，NodeLists不會。你可以看到我在myInit2中如何使用它。儘管這個例子有些人爲之 - 每個元素只發生一件事，我發現它是一種有用的模式 - 儘管沒有在NodeList中的每個節點上調用的匿名（未命名）函數。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 
function toggleClass(element, newStr) 
{ 
    index=element.className.indexOf(newStr); 
    if (index == -1) 
     element.className += ' '+newStr; 
    else 
    { 
     if (index != 0) 
      newStr = ' '+newStr; 
     element.className = element.className.replace(newStr, ''); 
    } 
} 
function forEachNode(nodeList, func) 
{ 
    var i, n = nodeList.length; 
    for (i=0; i<n; i++) 
    { 
     func(nodeList[i], i, nodeList); 
    } 
} 

window.addEventListener('load', mInit, false); 

function mInit() 
{ 
} 

</script> 

<script type="text/javascript"> 
    <!-- HIDE FROM OLD BROWSERS 
    /* <![CDATA[ */ 

    var oVTog = { 
     toggle: function (el) { 
      var container = el.parentNode; 
      var para = container.getElementsByTagName('p')[0]; 
      para.style.display = "none"; 

      var isClicked = false; 

      el.onmouseover = function() { 
       para.style.display = ''; 
       return false; 
      }; 
      el.onmouseout = function() { 
       if (!isClicked) 
        para.style.display = 'none'; 
       return false; 
      }; 
      el.onclick = function() { 
       // if it's clicked, change it to TRUE 
       // if it's clicked again, change it back to FALSE 

       isClicked = !isClicked; // toggle 

       para.style.display = ((isClicked) ? '' : 'none'); 
       return false; 
      }; 
     } 
    }; 


    window.addEventListener('load', yourInit, false); 
    window.addEventListener('load', myInit, false); 
    window.addEventListener('load', myInit2, false); 

    function yourInit() 
    { 
     // 2 lines per element to toggle. 200items = 400 lines 
     var l; 
     l = document.getElementById('togTrigger'); 
     oVTog.toggle(l); 

     l = document.getElementById('togTrigger4'); 
     oVTog.toggle(l); 
    }; 

    function myInit() 
    { 
     // 4 lines total. 200items = 4 lines 
     var containerDiv = document.getElementById('myMethod'); 
     var i, nodeList = containerDiv.getElementsByClassName('togTrigger'); 
     for (i=0; i<nodeList.length; i++) 
      oVTog.toggle(nodeList[i]); 
    }; 

    function myInit2() 
    { 
     var containerDiv = document.getElementById('mySecondMethod'); 
     var i, nodeList = containerDiv.getElementsByClassName('togTrigger'); 
     forEachNode(
         nodeList, 
         function(curItem, curIndex, ndeLst) 
         { 
          oVTog.toggle(curItem) 
         } 
        ); 
    }; 


    /* ]]> */ 
    //END HIDING --> 
</script> 

<style> 
</style> 
</head> 
<body> 
    <div id='yourMethod'> 
     <a href="#" id="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" id="togTrigger4"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 

    <div id='myMethod'> 
     <a href="#" class="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" class="togTrigger"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 

    <div id='mySecondMethod'> 
     <a href="#" class="togTrigger"><i>text</i></a> 
     <p class="togContent">text</p> 

     <span> 
      <a href="#" class="togTrigger"><i>text</i></a> 
      <p class="togContent">text</p> 
     </span> 
    </div> 
</body> 
</html>

來源

2013-03-21 12:28:33 enhzflep

您可以使用一個for循環：

// Handle the first one separately because it doesn't have a number at the end 
var l = document.getElementById('togTrigger'); 
oVTog.toggle(l); 
for (var i=2;i< 12;i++){ 
    l = document.getElementById('togTrigger' + i); 
    oVTog.toggle(l); 
}

也可以考慮將類分配給所有togTrigger元素，選擇它們，環比他們並呼籲oVTog.toggle。

來源

2013-03-21 10:53:02

謝謝，如果元素數達到3位數，我還會更改數字12以外的任何內容嗎？編輯：它不起作用，所有的箱子現在打開 – Martijn 2013-03-21 11:01:02

@Martijn不，它與3位數字一樣。它應該和你發佈的代碼一樣，之前是否工作？ – 2013-03-21 11:26:39

是的，我發佈的腳本正在工作。 – Martijn 2013-03-21 11:34:15

任何方式來減少所需的togTriggers的數量？

回答

相關問題