使用 php 循环和 jquery 显示更多信息

Question

我正在使用 php 循环大约 40 个字符串。我目前使用substr() 仅显示前 170 个字符。我正在使用 jQuery 隐藏字符串的其余部分并创建一个链接来显示其余部分。这是我正在循环的代码：

echo "<span>" . $substring_1 . "</span><span class='dotdot'>...</span><span class='readmore'>" . $substring_2 . "</span><a href='#' class='clickmore'>Show more</a>";

这里是 jQuery：

$(document).ready(function() {
    $(".readmore").hide();
    $(".clickmore").click(function() {
        $(".dotdot").hide();
        $(".readmore").show();
    });
});

此代码有效，但是，我希望它仅为单个字符串“显示更多”。现在，因为我正在使用类选择器，所以当我单击“显示更多”时，它会为循环中的每个实例“显示更多”。

有没有办法只为我点击的循环实例“显示更多”？

Answer 1

你需要使用$(this)和prev()

$(document).ready(function() {
    $(".readmore").hide();
    $(".clickmore").click(function() {
        $(this).prev().prev(".dotdot").hide();      //<<<<<<<<<<<<<<<
        $(this).prev(".readmore").show();    //<<<<<<<<<<<<<<<
    });
});

$(document).ready(function() {
    $(".readmore").hide();
    $(".clickmore").click(function() {
        $(this).prev().prev(".dotdot").hide();      //<<<<<<<<<<<<<<<
        $(this).prev(".readmore").show();    //<<<<<<<<<<<<<<<
        $(this).hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>

<hr />
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>

<hr />
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>