0

我正在使用以下脚本在鼠标悬停并单击时打开一个框。在我的页面上有很多盒子要打开，还有更多要打开。我可以使这些盒子工作的唯一方法是让每个盒子制作一个新的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 内的正文中应用脚本的方式（页面由表中的许多 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>
4

2 回答 2

1

您可以使用 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-21T10:53:02.050 回答
0

正如我所提到的，正如马特更清楚地指出的那样，您可以以编程方式访问这些元素 - 无需通过名称来引用它们。这是一些可以解决问题的代码。（您可以忽略第一个脚本标记的第一个内容——它们是我在“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-21T12:28:33.833 回答