BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptでGetElementByIdの代わりにgetElementByClassを使用するには？

2023-01-06 07:02:26

質問

私は、ウェブサイト上の特定のDIV要素の可視性を、各DIVのクラスに応じて切り替えようとしています。私はそれらをトグルするために基本的なJavaScriptのスニペットを使用しています。問題は、そのスクリプトが getElementById として getElementByClass はJavaScriptではサポートされていないからです。そして残念ながら、DIVの名前にidではなくclassを使わなければなりません。なぜなら、DIVの名前は特定のカテゴリ名を使用してXSLTスタイルシートによって動的に生成されるからです。

私は、特定のブラウザが現在 getElementByClass をサポートするようになったのは知っていますが、Internet Explorer はサポートしていないので、そのルートは使いたくありません。

関数を使ってクラスごとに要素を取得するスクリプトを見つけました（このページの#8のようなものです。 http://www.dustindiaz.com/top-ten-javascript/ のように）、しかし、それらを私のトグル・スクリプトと統合する方法がわかりません。

これが HTML コードです。DIV自体はXML/XSLTでページロード時に生成されるため、欠落しています。

主な質問 以下のToggleスクリプトで、IDで要素を取得するのではなく、クラスで要素を取得するにはどうしたらよいでしょうか？ 

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

どのように解決するのですか？

最近のブラウザは document.getElementsByClassName . この機能を提供しているベンダーの完全な内訳は、次のサイトで見ることができます。 caniuse . 古いブラウザへのサポートを拡張したい場合は、jQuery にあるようなセレクタ エンジンまたはポリフィルを検討するとよいでしょう。

古い回答

次のことを調べてみてください。 jQuery をチェックするとよいでしょう。 

$(".classname").hide(); // hides everything with class 'classname'

GoogleはjQueryのソースファイルをホストしているので、それを参照すればすぐに実行することができます。あなたのページには、次のように記述してください。 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します