Question

我在实现jquery show / hide引号链接方面遇到了一个有趣的障碍，因为当引号最终令人烦恼时。因此，如果引用太长，请使用show链接隐藏它。

一个简单的＆＃34;每个＆＃34;查看给出引号的类很容易。问题是，引号可能包含引号并且会破坏引号，因为它会尝试在每个引号上执行，而不是在顶部引用。

这是我现在的代码：

// hide long quotes
var showChar = 350;
var ellipsestext = "...";
var moretext = "Click for more";
var lesstext = "Click for less";
$('.comment_quote').each(function() 
{
    var content = $(this).html();

    if(content.length > showChar) 
    {
        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

我无法想到一个解决方案，它可以循环浏览页面并选择最高报价＆＃34; comment_quote＆＃34;每次上课。

Answer 1

我认为这个例子可以帮到你:)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
</head>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<body>
<script>
    $(function () {
            var text = $('#text').text();
            var nw=[];
            var leng = text.length;
            var result="";
            if(leng>50){
                 nw[0] = text.substr(0, 50);
                 nw[1] = "  <a href='#' id='btn'>more..</a>";
                 nw[2] = text.substr(50);
                result = nw[0] + nw[1];
                $('#text').html(result);
            }
        $('#btn').click(function () {
            result = nw[0] + nw[2];
            $('#text').html(result);
        });


    });
</script>
</body>
</html>

jquery隐藏长引号，显示更多/更少

1 个答案: