0

私が目指しているのは、すべての div を (css クラスを介して) 非表示にし、モーダル スタイルのポップアップでそれらを表示することです (これも css を介して行われます)。例えば：

<a href="" id="speclinkOpen">Show Spec</a>
<div class="speclink">   
    <h1>This is spec 1</h1>
    <a id="speclinkClose">Close</a>    
</div>

<a href="" id="speclinkOpen">Show Spec</a>
<div class="speclink">   
    <h1>This is spec 2</h1>
    <a id="speclinkClose">Close</a>    
</div>

div (speclink のクラス) のコンテンツは非表示になります。ボタンを押すと (id speclinkOpen) 関連するコンテンツが表示されるようにしたいので、上部のボタンがクリックされた場合は「これは仕様 1 です」、下部のボタンがクリックされた場合は「これは仕様 2 です。

実際のクラス名ではなく on.click THIS を使用する必要があることはわかっていますが、どうやってそれを行うのか完全にはわかりません..誰かが私のためにそれを明らかにすることができますか?

基本的に、jQuery は div コンテンツをオーバーレイ スタイルで表示しますが、同じクラス名を使用してどのボタンが押されたかに基づいて、どの div コンテンツをロードするかをどのように知るのでしょうか? 私にはたくさんあるので、それぞれに異なる名前を付けることはオプションではありませんが、おそらく私は問題を完全に間違った方法で扱っていますか? ありがとうジョン。

4

1 に答える 1

1

データ属性を見てください。

あなたのhtmlで次のようなことができます：

<a href="#" class="speclinkOpen" data-div="div1">Show Spec</a>
<div class="speclink" id="div1">   
    <h1>This is spec 1</h1>
    <a id="speclinkClose1">Close</a>    
</div>

<a href="#" class="speclinkOpen" data-div="div2">Show Spec</a>
<div class="speclink" id="div2">   
    <h1>This is spec 2</h1>
    <a id="speclinkClose2">Close</a>    
</div>

そしてjQueryスクリプトでは：

$(function(){
    $('img.speclinkOpen').on('click', function(){
       var id = $(this).data('div'); // take the id to "highlight"
       $('#' + id).addClass('modal'); // do whatever you want in with class or .css()
    });
});

編集

id 属性を div に一意に割り当てることができないため、データ属性を使用できない場合:

$(function(){
    $('img.speclinkOpen').on('click', function(){
       $(this).next('div.speclink').addClass('modal'); // do whatever you want in with class or .css()
    });
});
于 2013-09-26T12:31:59.853 に答える