모든 버튼에서 중지 버튼 텍스트 변경

Question

$('.entry-content #toggle').click(function() { 

var elem = $('#toggle').text(); 

if (elem == 'Read More') { 

$('.entry #toggle').text('Read Less'); 

} else { 

$('.entry #toggle').text('Read More'); 

} 

}); 

이 jQuery는 아카이브 페이지의 각 기사에있는 모든 버튼의 버튼 텍스트를 변경합니다. 클릭 한 버튼 만 변경하면됩니다.

<div id="toggle" class="btn">Read More</div> 

<div class="text" /> 

업데이트 1 : 단락이 두 개 이상인 경우 버튼을 추가하고 싶습니다. 나는 내가 어떻게 사용할지를 생각한다.

업데이트 2 :

$('#toggle').click(function() { 

$(this).closest('.post').find('.text').slideToggle(); 

$(this).text(function(i, v) { 

    return v === 'Read More' ? 'Read Less' : 'Read More' 


     }); 
}); 

Answer 1

참조 경우 내 자신의 버튼을 누릅니다.

$('.entry-content #toggle').click(function() { 

var elem = $(this).text(); 

if (elem == 'Read More') { 

$(this).text('Read Less'); 

} else { 

$(this).text('Read More'); 

} 

}); 

Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

$('#toggle').click(function() { 
 

 
    var elem = $(this).text(); 
 

 
    if (elem == 'Read More') { 
 
     $(this).text('Read Less'); 
 
    } else { 
 
     $(this).text('Read More'); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggle" class="btn">Read More</div> 
 

 
<div class="text" />

Answer 3

단순화 된 코드입니다.

$('#toggle').click(function() { 
 
    $(this).text(function(i, v){ 
 
     return v === 'Read More' ? 'Read Less' : 'Read More' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggle" class="btn">Read More</div> 
 

 
<div class="text" />