2017-02-06 8 views
0

私はいくつかのコードを読んでいると、読み込みのhtmlの部分があります:divのデータターゲット属性をそのdivのIDに設定することは何を意味しますか?

<div id="uniqueId1234" data-target=".uniqueId1234"> 
    ... 
</div> 

して、以前に同じHTMLファイル内のクラスとして、このdiv要素を使用しているようだspan要素がある:

<span class="uniqueId1234"> 
    ... 
</span> 

誰かがこの仕組みを説明できますか?クラスはCSSファイルで作成されたものだと思っていました。申し訳ありませんが、これはばかな質問です。

答えて

1

これは、data-target属性を使用して、要素の一部の変更やイベントをリッスンするJavascriptコードまたはライブラリの一部です。

このイベントがトリガされると、それはその後、以下、この基本的なjQueryのベースの例に見られるように、いくつかの他のロジックを実行するためのセレクタとしてその属性の値を使用することができる:

// When an element containing your data-target attribute is clicked 
$('[data-target]').click(function(){ 
    // Find the appropriate target (i.e. ".uniqueId1234") 
    var target = $(this).data('target'); 
    // Then use it as a selector for some type of operation 
    $(target).toggle(); 
}); 

クラスは内非常に一般的ですCSSを使用して複数の要素をスタイル設定することもできますが、一般的にJavascriptのメカニズムとしても使用できます。

0

divのデータターゲット属性をそのdivのIDに設定するとはどういう意味ですか?

何もありません。 data-*属性は、カスタムコード(通常はクライアント側JS)のカスタムデータを処理するように設計されています。

私はクラスがCSSファイルで作成されたものだと思っていました。

クラスは、要素を任意のグループに配置するために使用されるHTML機能です。これらは、CSSを書くときには一般的に使用されますが、クライアント側のJSや他のコードも使用されます。

関連する問題