Javascript 有没有办法减少所需的触发器数量？_Javascript_Toggle

Javascript 有没有办法减少所需的触发器数量？

javascript

Javascript 有没有办法减少所需的触发器数量？,javascript,toggle,Javascript,Toggle,我正在使用下面的脚本打开一个框，然后单击鼠标。在我的页面上，有很多盒子要打开，还有更多的盒子要打开。我能让这些盒子工作的唯一方法是让每个盒子都有一个新的触发器。即使同一个单词在页面的不同位置打开同一个框，我也需要一个新的触发器。最终我会得到Toggrigger1到Toggrigger200之类的东西。这不太实际。有没有办法减少所需的触发器数量 <script type="text/javascript"> <!-- HIDE FROM OLD BROWSERS

我正在使用下面的脚本打开一个框，然后单击鼠标。在我的页面上，有很多盒子要打开，还有更多的盒子要打开。我能让这些盒子工作的唯一方法是让每个盒子都有一个新的触发器。即使同一个单词在页面的不同位置打开同一个框，我也需要一个新的触发器。最终我会得到Toggrigger1到Toggrigger200之类的东西。这不太实际。有没有办法减少所需的触发器数量

<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中的主体中应用脚本的方式（页面由一个表中的多个div组成，/p不应该在div中，但它可以工作）：



文本

当同一个div中有两个或多个文本框时，其他触发器在一个范围内：

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



文本

您可以使用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);
}

//单独处理第一个，因为它的末尾没有数字
var l=document.getElementById（'togTrigger'）；
oVTog.开关（l）；
对于（变量i=2；i<12；i++）{
l=document.getElementById（'togTrigger'+i）；
oVTog.开关（l）；
}

也考虑将一个类赋值给所有的ToT触发器元素，选择它们，循环它们，并调用<代码> Ototog。切换< < /C> >

正如我提到的，正如Matt更清楚地指出的，你可以以编程方式访问这些元素——不必按名称引用它们。这里有一些代码可以实现这一点。（您可以忽略第一个脚本标记的第一个内容-它们是我的“blank.html”文件中的助手函数-所有（我的）页面都是从该文件生成的）

Javascript数组为您提供了forEach函数，不幸的是，节点列表没有。您可以看到我是如何在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>


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（元素，newStr）
{
index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
其他的
{
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
}
函数forEachNode（节点列表，func）
{
变量i，n=节点列表长度；
对于（i=0；i
文本
文本
文本
文本
文本
文本

按类而不是按id选择如何？也就是说，如果将所有id='togTriggerXX'元素改为class='togTrigger'，则可以使用document.querySelectorAll（'.togTrigger'）或document.getElementsByClassName（'togTrigger'））（第一种方法的优点是，您可以在容器元素上调用它，因此只针对其中包含的元素。您也可以在文档元素上使用“#idContainer.toggleTriggerClassName”调用它）然后你会得到一个节点列表。你可以在列表中迭代，在每个元素上调用oVTog.toggle。我需要一个代码示例，因为我对javascript的了解非常有限。谢谢，如果元素数达到3位数，除了数字12之外，我还有什么要更改的吗？编辑：它不起作用，所有的框现在都是open@Martijn不，是的与3位数字相同。它应该与您发布的代码相同，它以前工作过吗？我编辑了我的问题，以展示如何在html中应用脚本

<!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>