Jquery高度Toggle with More＆amp; Less

Question

我尝试在点击功能时切换班级， 在一个页面我有4个框，我必须包括这些框的视图更多选项。当我点击查看更多+时，下面的脚本正在工作，但是点击文本“更多+更少 - ”文本切换同时切换4个框。我想只切换一个文本更改为“Less - ”的框。

$(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">
	<div class="feedScroll">
	"Did You Hear What Happened to Charlotte King?" is the seventh ....."
	</div>
	<div class="viewMore">More +</div>
</div>
<div class="statusSection">
	<div class="feedScroll">
	"Did You Hear What Happened to Charlotte King?" is the seventh ....."
	</div>
	<div class="viewMore">More +</div>
</div>

Answer 1

如果您只想更改单击的.viewMore元素的文本，请替换

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

与

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