彩盒 - 如何使用

類來顯示DIV

<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代碼的ID，如果我給ID，具體工作的每一個描述div的

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

我使用ColorBox插件。

當我點擊閱讀更多我需要說明彈出。我能夠實現這個使用ID，我不想給id的描述，因爲這是動態生成的。我怎樣才能達到這個使用類？這可能嗎？

任何幫助表示讚賞！

來源

2017-03-23 linktoahref

那麼你現有的JS適用於什麼樣的JS？ –

@VergilPenkov代碼更新！ – linktoahref

很抱歉，您是否可以更新HTML，以便我們知道您在這種情況下如何使用ID？ :) –

ColorBox也接受HTML。試試下面

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

來源

2017-03-23 14:11:54 Pugazh

如果你的css類'hidden'適用display：none;試試這個

CSS：

.not_hidden { display:block }

jQuery的

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

編輯使用類。

來源

2017-03-23 13:59:12 rob

OP正在使用'ColorBox'，你的答案沒有它！ – Pugazh

'當我點擊閱讀更多我需要描述彈出'與jquery標記。我無法理解爲什麼這是一個無效的答案。如果jquery不被允許，爲什麼它被標記。 – rob

我沒有downvoted你的答案！ – linktoahref

解決！

對不起。我應該更多地關注文檔。

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

來源

2017-03-23 14:15:16 linktoahref

彩盒 - 如何使用

回答

相關問題