カラーボックス - どのように次のように私のHTML構造があるのdiv使ってクラス

Question

を表示するには：私は、それぞれの説明のdivの

$(".read_more").on("click", function (e) { 
    var href = '#'+$(this).next().attr('id'); 
    $(this).colorbox({ inline: true, href: href }); 
}); 

にIDを与える場合は、idのために働く

<div class="parent"> 
    <span class="read_more">Read More</span> 
    <div class="hidden description" id="description1">Description</div> 
</div> 
.. 
<div class="parent"> 
    <span class="read_more">Read More</span> 
    <div class="hidden description" id="description2">Description</div> 
</div> 

私のJSコード私はColorBoxプラグインを使用しています。

私が「Read More」をクリックすると、「Description」がポップアップ表示されます。私はidを使ってこれを達成することができます。これは動的に生成されるため、IDの説明には与えたくありません。どのように私はクラスを使用してこれを達成できますか？これは可能ですか？

Answer 1

ColorBoxもHTMLを受け入れます。以下を試してください

$(".read_more").on("click", function (e) { 
    var html = '#'+$(this).next().html(); 
    $(this).colorbox({ inline: true, html: html }); 
}); 

Answer 2

cssクラス 'hidden'が適用される場合は、display：none;

.not_hidden { display:block } 

jqueryのクラスを使用するように編集

$('.read_more').click(function(){ 
     $(this).next('.description').addClass('not_hidden') 
}) 

：この

CSSを試してみてください。

Answer 3

解決済み！

ごめんなさい。私はドキュメントにもっと注意を払っていたはずです。

// Using a jQuery object: 
$(".read_more").on("click", function (e) { 
    e.preventDefault(); 
    var $desc = $(this).next(); 
    $(this).colorbox({ inline: true, href: $desc }); 
});