0

2つのボタンで切り替えられるようにしたいリンクがいくつかあるページがあります。getElementByIdを使用して1つのリンクで機能しますが、それらのいくつかのグループを切り替える必要があります。私はこれから始めましたが、うまくいきませんでした。getElementByClassはIE以外のすべてで機能すると聞きましたが、Opera 11.5を使用していますが、それでも機能しません。私は少し検索をしましたが、私はjavascriptに少し慣れておらず、ほとんどの説明を理解していません。誰かが簡単な代替案で私を助けてくれますか、それとも私が作った問題を解決するのを手伝ってくれますか？これは私が使っていたテストページです。

<head>
<script type="text/javascript">
function hideNames()
{
document.getElementByClass("webname").style.display="none";
}
function showNames()
{
document.getElementByClass("webname").style.display="inline";
}
</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>
4

3 に答える 3

1

そして、それはあなたがそれから繰り返す必要があるアイテムの配列を返すでしょう、それであなたのコードがうまくいくとは思えません。しかし、この種のコードを劇的に単純化するjQueryを見てみたいと思うかもしれません。

于 2011-09-02T05:53:27.473 に答える
1

適切な関数名を使用し、その関数からの戻り結果を配列として処理するには、コードを修正する必要があります。ない非常に古いブラウザgetElementsByClassName（IE9までのIEのすべてのバージョン）を除いて、正常に動作するはずです。代わりに使用できる代替手段がありますが、それほど効率的ではありませんが、ドキュメント内のすべてのタグをフィルタリングすることで機能します。

単一の要素のみが必要な場合document.getElementById("idvalue")は、クラス名の代わりにIDを使用して操作します。 getElementById古いブラウザでも広くサポートされています。

クラス名を使用してコードを機能させる方法は次のとおりです。

<head>
<script type="text/javascript">
function hideNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="none";
    }
}

function showNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="block";
    }
}

</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

PS<p>タグはdisplay：blockであり、display：inlineではありません。

古いブラウザーの場合、最善の方法は、ブラウザー間のすべての問題を解決する、事前に構築されたセレクターエンジンを使用することです。私はYUI、jQuery、Sizzleを使用しました（SizzleはYUIとjQuery内のセレクターエンジンです）。すべて無料でとても良いです。

ネイティブJavaScriptを使用する必要がある場合は、getElementsByClassNameを独自に実装するためのコードを取得することもできます。ソースは次のとおりです：http：//ejohn.org/blog/getelementsbyclassname-speed-comparison/およびhttp://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/。

これがjQueryでどれほど簡単かを示すために、そのためのコード全体を次に示します：http: //jsfiddle.net/jfriend00/qP3XZ/。

HTMLは次のとおりです。

<p class="webname">Webname</p>
<p class="webname">test</p>
<input id="hide" type="button" value="Hide Web Names" />
<input id="show" type="button" value="Show Web Names" />

コードは次のとおりです。

$(document).ready(function() {
    $("#hide").click(function() {
        $(".webname").hide();
    });

    $("#show").click(function() {
        $(".webname").show();
    });
});
于 2011-09-02T06:03:00.353 に答える
0

jQueryを使用して、同じクラスのすべての要素を選択できます。

$('.myclass').onclick(function() {
    ...some instruction...
});

または同じ要素：

$('button').onclick(function() {
    ...some instruction...
});
于 2011-09-02T05:55:59.673 に答える