ColorBox - 클래스

Question

를 사용하여 DIV를 표시하는 방법

다음과 같이 내 HTML 구조는 다음과 같습니다

<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> 

I가 ID를 제공하는 경우가 id 작동

내 JS 코드 각 기술 사업부의

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

내가 ColorBox 플러그인을 사용합니다.

내가 자세히 읽으려면 Description (설명)이 필요합니다. 이 ID를 사용하여이 작업을 수행 할 수 있으며이 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; 이

CSS를 시도 :

.not_hidden { display:block } 

JQuery와

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

클래스를 사용하여 편집.

Answer 3

해결되었습니다!

죄송합니다. 나는 문서에 더 많은주의를 기울여야했다.

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