-1

特定のボタン (この場合はリンク) のクリックに基づいてコンテンツを変更するテーブルがいくつかあります。私はこの Javascript コードを他の場所でうまく使用しましたが、switchid() 関数のパラメーターは 1 つだけでした (いじるテーブルは 1 つだけでした)。私はこの例を調査し続けており、変数を正しく渡しているようですが、何が間違っているのでしょうか? このコードは、Chrome または IE では機能しません。

編集: コメントによると、JavaScript セクションを 1 つの小さな関数に絞り込むことができました。これは同じことを行う必要があります。下記に変更させていただきました。しかし、それでもうまくいきません。

また、「array」変数と「x」変数を「JonArray」と「JonX」に変更して、それらのいずれかが予約語になる可能性を回避しました。

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">

            var topTable = new Array('English','Spanish');
            var bottomTable = new Array('Japanese','Italian');

            function switchid(JonArray,JonX) {
                for(var i=0;i<JonArray.length();i++) {
                    document.getElementById(JonX).style.display='none';
                }
                document.getElementById(JonX).style.display='table-row-group';
            }

        </script>
        <table border='1'>
            <thead>
                <tr><td>Odds</td><td>Evens</td></tr>
            </thead>
            <tfoot>
                <tr><td><a href="javascript:switchid('topTable','English')">English</a></td><td><a href="javascript:switchid('topTable','Spanish')">Spanish</a></td></tr>
            </tfoot>
            <tbody id='English'>
                <tr><td>One</td><td>Two</td></tr>
                <tr><td>Three</td><td>Four</td></tr>
            </tbody>
            <tbody id='Spanish' style="display:none;">
                <tr><td>Uno</td><td>Dos</td></tr>
                <tr><td>Tres</td><td>Quatro</td></tr>
            </tbody>
        </table>
        <br />
        <table border='1'>
            <thead>
                <tr><td>Odds</td><td>Evens</td></tr>
            </thead>
            <tfoot>
                <tr><td><a href="javascript:switchid('bottomTable','Japanese')">Japanese</a></td><td><a href="javascript:switchid('bottomTable','Italian')">Italian</a></td></tr>
            </tfoot>
            <tbody id='Japanese'>
                <tr><td>Ichi</td><td>Ni</td></tr>
                <tr><td>San</td><td>Shi</td></tr>
            </tbody>
            <tbody id='Italian' style="display:none;">
                <tr><td>Un</td><td>Due</td></tr>
                <tr><td>Tre</td><td>Quattro</td></tr>
            </tbody>
        </table>
    </body>
</html>
4

4 に答える 4

1

http://jsfiddle.net/92ZPM/1/

関数と変数が作成された時期に関係なく使用できることを確認しました。

また、変数にわかりやすい名前を付け、テーブル データをクリーンアップして単一のオブジェクトに格納しました。

JavaScript

window.switchid = function (table, language) {
    var tables = {
        'top': ['English', 'Spanish'],
        'bottom': ['Japanese', 'Italian']
    };
    for (var i = 0; i < tables[table].length; i++) {
        document.getElementById(tables[table][i]).style.display = 'none';
    }
    document.getElementById(language).style.display =
        'table-row-group';
}

HTML

<table border='1'>
    <thead>
        <tr>
            <td>Odds</td>
            <td>Evens</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><a href="javascript:switchid('top','English');">English</a>
            </td>
            <td><a href="javascript:switchid('top','Spanish')">Spanish</a>
            </td>
        </tr>
    </tfoot>
    <tbody id='English'>
        <tr>
            <td>One</td>
            <td>Two</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Four</td>
        </tr>
    </tbody>
    <tbody id='Spanish' style="display:none;">
        <tr>
            <td>Uno</td>
            <td>Dos</td>
        </tr>
        <tr>
            <td>Tres</td>
            <td>Quatro</td>
        </tr>
    </tbody>
</table>
<br />
<table border='1'>
    <thead>
        <tr>
            <td>Odds</td>
            <td>Evens</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><a href="javascript:switchid('bottom','Japanese')">Japanese</a>
            </td>
            <td><a href="javascript:switchid('bottom','Italian')">Italian</a>
            </td>
        </tr>
    </tfoot>
    <tbody id='Japanese'>
        <tr>
            <td>Ichi</td>
            <td>Ni</td>
        </tr>
        <tr>
            <td>San</td>
            <td>Shi</td>
        </tr>
    </tbody>
    <tbody id='Italian' style="display:none;">
        <tr>
            <td>Un</td>
            <td>Due</td>
        </tr>
        <tr>
            <td>Tre</td>
            <td>Quattro</td>
        </tr>
    </tbody>
</table>
于 2013-07-31T19:59:00.360 に答える
0

JavaScript を少し変更する必要があります。

        var tables=new Array();
        tables['topTable'] = new Array('English','Spanish');
        tables['bottomTable'] = new Array('Japanese','Italian');

        function switchid(JonArray,JonX) {
            //alert(JonArray);
            var tmptable=tables[JonArray];
            for(var i=0;i < tmptable.length;i++) {
                document.getElementById(tmptable[i]).style.display='none';
            }
            document.getElementById(JonX).style.display='';
        }
于 2013-07-31T19:43:04.833 に答える
-1

これらの回答のいくつかは機能しますが、Chrome DevTools を介して実際の回答を見つけました! 私の「for」ループでは、「長さ」の代わりに「長さ（）」を使用していました!!!

于 2013-07-31T20:59:32.987 に答える
-2

ID をループする代わりに CSS を使用しないのはなぜですか?

JSFiddle

HTML

<table border='1' class="English">
    <thead>
        <tr><td>Odds</td><td>Evens</td></tr>
    </thead>
    <tfoot>
        <tr><td onclick="changeLang(this,'English')">English</td><td onclick="changeLang(this,'Spanish')">Spanish</td></tr>
    </tfoot>
    <tbody id='English'>
        <tr><td>One</td><td>Two</td></tr>
        <tr><td>Three</td><td>Four</td></tr>
    </tbody>
    <tbody id='Spanish'>
        <tr><td>Uno</td><td>Dos</td></tr>
        <tr><td>Tres</td><td>Quatro</td></tr>
    </tbody>
</table>

CSS

tbody {
    display: none;
}

.English #English, .Spanish #Spanish, .Japanese #Japanese, .Italian #Italian {
    display: table-row-group;
}

JS

function changeLang(cell, lang) {
    cell.parentNode.parentNode.parentNode.className = lang;
}
于 2013-07-31T19:38:37.463 に答える