Jquery 高度用 More &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 +");
}