Jqueryの高さMore＆LessとToggle

Question

クリック機能でクラスを切り替えようとしています ページには4つのボックスがあり、これらのボックスの表示オプションを追加する必要があります。以下のスクリプトは、もっと見る+をクリックしても動作していますが、「More + and less」のテキストをonclickすると、テキストの切り替えは同時に4つのボックスを切り替えることになります。私は、テキストの変更が「Less - 」の1つのボックスのみを切り替えたいと考えています。

$(document).ready(function() { 
 
    $('.viewMore').click(function() { 
 
     var k = $(this).text(); 
 
     if (k == "More +") { 
 
      $(".viewMore").text("Less -"); 
 
     }else { 
 
      $(".viewMore").text("More +"); 
 
     } 
 
     $(this).prev('.statusSection .feedScroll').toggleClass("big"); 
 
     <!-- $('.statusSection .feedScroll').toggleClass('big'); --> 
 
    }); 
 
});

.feedScroll {; height:100px; overflow:hidden} 
 
.big { min-height:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="statusSection"> 
 
\t <div class="feedScroll"> 
 
\t "Did You Hear What Happened to Charlotte King?" is the seventh ....." 
 
\t </div> 
 
\t <div class="viewMore">More +</div> 
 
</div> 
 
<div class="statusSection"> 
 
\t <div class="feedScroll"> 
 
\t "Did You Hear What Happened to Charlotte King?" is the seventh ....." 
 
\t </div> 
 
\t <div class="viewMore">More +</div> 
 
</div>

Answer 1

クリックした.viewMore要素のテキストのみを変更したい場合は、

if (k == "More +") { 
    $(this).text("Less -"); 
}else { 
    $(this).text("More +"); 
}