任何方式来减少所需的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的数量？

回答

相关问题