jquery를 사용하여 단락에 read_more/read_less 링크를 올바르게 추가했습니다.

Question

div 내에 한 묶음의 단락이 있고 그 중 하나에 read_more 링크가 있습니다. 동일한 div 내의 read_more 링크 다음에 오는 모든 단락은 기본적으로 숨겨집니다. READ_MORE 클릭

, 그것은 READ_MORE 이후에 오는 모든 단락을 표시하고 마지막 단락의 끝에 read_less 링크를 추가합니다. read_less가 클릭되면 read_more가 될 때까지 모든 단락을 숨기고 read_more 링크를 다시 표시하고 숨 깁니다.

거의 다이다, 여기를 참조하십시오 http://jsfiddle.net/g8tevwb1/

$('p').find('a.read_more').parent().nextAll().hide(); 

$('a.read_more').click(function(){ 
    $(this).parent().nextAll().show(); 
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>'); 
    $(this).hide(); 
    return false; 
}); 

$('a.read_less').click(function(){ 
    $(this).parent().prevUntil('a.read_more').hide(); 
    $(this).hide(); 
    return false; 
}); 

난 그냥 작업 read_less을 얻을 관리 해달라고. 이런 식으로 read_less 링크를 잘못 추가하면 어떻게됩니까? 나는 그것을 조작 할 수, 색상 등을 변경하지만 클릭 기능 doesnt 작동합니다.

중요한 것은 모든 div가 포함 된 div 내에서 발생한다는 것입니다. 다른 div 내에서 다른 단락을 다른 read_more 버튼과 함께 사용하므로 영향을 받기를 원하지 않습니다.

도움을 주시면 감사하겠습니다.

Answer 1

read_less 링크가 동적으로 추가되었으므로 jQuery .on() 메서드를 사용해야합니다.

Fiddle

$('p').find('a.read_more').parent().nextAll().hide(); 

$('p').on('click', 'a.read_more', function(){ 
    $(this).parent().addClass('first'); 
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>'); 
    $(this).parent().nextAll().show(); 
    $(this).hide(); 
    return false; 
}); 

$('p').on('click', 'a.read_less', function(){ 
    $(this).parent().prevUntil('p.first').andSelf().hide(); 
    $('a.read_more').show(); 
    $(this).remove(); 
    return false; 
}); 

는 또한 read_less 클릭 콜백 내부에 작은 오류를 수정했습니다. 나는 이것이 당신이 원하는 행동이라고 생각합니다. 동적으로 추가 된 요소와 관련된 post이 있습니다.

주

엄격하게 필요하지 않은 경우에는 추가 동적 read_less 링크를 제거 피할 수 있습니다.

$('p').find('a.read_more').parent().nextAll().hide(); 

$('a.read_more').click(function(){ 
    $(this).parent().addClass('first'); 
    $(this).parent().nextAll().show(); 
    $(this).hide(); 
    return false; 
}); 

$('a.read_less').click(function(){ 
    $(this).parent().prevUntil('p.first').andSelf().hide(); 
    $('a.read_more').show(); 
    return false; 
}); 

Fiddle