2017-08-03 23 views
0

私は次のようなHTMLがあります。選択兄弟

<div class="chooser" style="display:none;"><div data-id="day">Day <i class="fa fa-arrow-right" aria-hidden="true"></i></div><div data-id="nightamst">Night A <i class="fa fa-arrow-right" aria-hidden="true"></i></div><div data-id="nightzoet">Night Z<i class="fa fa-arrow-right" aria-hidden="true"></i></div></div> 
<div class="bdownload day" style="display: none;">content</div> 
<div class="bdownload nightamst" style="display: none;">content</div> 
<div class="bdownload nightzoet" style="display: none;">content</div> 

ここで、次のJavascriptを持っている:

を私は以前チューDIVからデータidとbdownload div要素を表示したいです。

jQuery(".chooser div").click(function(){ 
     console.log("test"); 

     jQuery(".chooser").hide(); 
     jQuery(this).parent(".chooser").siblings(jQuery(this).attr("data-id")).toggle(); 
    }); 

しかし、このコードを使用すると、トグルされません。 ".bdownload"を兄弟セレクタに入れると、すべてのbdownloadsがトグルされるので、フォールトはattrセレクタにあります。 "セレクタに"を追加しますか?

+0

'data-id'には '。'がありません。 – Taplar

+0

それは、それがクラスだからです。。 –

+0

それをデータフィールド自体に入れるか、単に 'の前に付加してください。 'あなたの兄弟の変数の部分に – Taplar

答えて

1
$('.chooser div').click(function() { 
    var selector = '.' + $(this).data('id') 
    $('.chooser').hide() 
    $(this).parent().siblings(selector).toggle() 
}) 
関連する問題