jQueryの '＃' +データ（ "ターゲット"）パターン

Question

私はたくさんこれを見てきました：

<a href="#" id="trigger" data-target="content">Click me</a> 
<div id="content">And something will happen here</div> 

JSでは、このように：それが私には少し奇妙に見える

$("#trigger").click(function(){ 
    $("#" + $(this).data("target")).hide(); 
}) 

この文字列の連結を行ってセレクタを作成し、それを使用してターゲット要素を取得します。他のターゲット要素を知る必要のある要素にハンドラを設定するためのJavascriptの優れたパターン（jQueryが利用可能）がありますか？

Answer 1

： - .tab1など、あなたが再び文字列連結を実行する必要はありませんようにクリックやイベントの中で

Answer 2

はなぜ私の意見では、このようにより良いアプローチを何かをしていない。他の人が示唆しているよう

// Set the target 
$("#trigger").data('target', $('#content')); 

// Get the target 
$("#trigger").click(function(){ 
    $(this).data("target").hide(); 
}) 

あなたはバックエンドからそれを設定している場合は、私は、属性値を持つハッシュが含まれるであろう。

<a href="#" id="trigger" data-target="#content">Click me</a> 

$("#trigger").click(function(){ 
    var target = $(this).data("target"); 
    $(target).hide(); 
}) 

Answer 3

セレクタを構築するオプションは常にありますが、セレクタ内の文字列を連結するよりも少し上手です。

$("#trigger").click(function(){ 
    var selector = "#" + $(this).data("target"); 
    $(selector).hide(); 
}); 

あなたが探しているものかどうかは少しわかりません。

あなたは文字列の連結を行うだけで元のために言う data-targetであると同様に、あなたが任意のセレクタを保存することができ #

<a href="#" id="trigger" data-target="#content">Click me</a> 

$("#trigger").click(function(){ 
    $($(this).data("target")).hide(); 
}) 

でIDを保存するのはなぜ

Answer 4

私はデータを完全にスキップして、優雅な分解を可能にします。あなたは単にあなたが/でも、 "ショー" を使用することができます 、中にあなたがモーダルショーを開始し、隠すためにコードしている任意の

$('#content').modal('toggle'); 

を使用することができます

$("#trigger").click(function(e){ 
    e.preventDefault(); 
    $($(this).attr("href")).show(); 
    // note, i'm purposly not using this.href due to a bug in IE that would return the entire href rather than just the hash 
}) 

Answer 5

と

<a href="#content" id="trigger" data-target="">Click me</a> 
<div id="content">And something will happen here</div> 

機能を直接「隠す」。

あなたはBootstrapと最新バージョンのjQueryを使用していると仮定します。

お楽しみください！

Answer 6

$（this）.attr（ 'data-target'、 '#myTarget'）;

これは私のために働いた