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内に2つ以上のテキストボックスがある場合、他の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

私が述べたように、また Matt がより明確に指摘したように、要素にはプログラムでアクセスできます。すべての要素を名前で参照する必要はありません。トリックを実行するコードを次に示します。(最初のスクリプト タグの最初の内容は無視してかまいません。これらは、'blank.html' ファイルにあるヘルパー関数です。すべての (私の) ページの元になるファイルです)

Javascript 配列は forEach 関数を提供しますが、残念ながら NodeList は提供しません。myInit2 でそれをどのように利用したかを見ることができます。この例はいくらか不自然ですが、各要素には 1 つのことしか起きていませんが、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 に答える