阅读有关数据库结果的更多信息

Question

您好，我的代码非常简单，但出于设计目的，我希望保持一切整洁，目前我正在提取所有描述，就像有些可能很大，有些可能很小，无论如何，为了公平起见，我决定制作一个阅读更多按钮，一旦我点击它，只需在文本上展开，所以以某种方式让它显示之后的前 160 个字符......然后阅读更多链接按钮，当你点击它时它会展开并显示整个文本 这是我现在使用的脚本：

<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">

所以我想知道这是如何完成的，如果可能的话只使用 javascript，谢谢！

Answer 1

使用css样式`text-overflow: ellipsis;和 jquery 以获得完整的功能。

$('#read-more').click(function() {
    $('#description').css('width','100%');
});

#description {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>

Answer 2

对于PHP方式：

$firstdesc=substr($thismovie['description'], 0, 160);

当阅读更多被按下时。

$totaldesc=substr($thismovie['description'], 160);

当然你也可以用 Javascript 来做。

Answer 3

虽然您当然可以使用 PHP，但另一种方法是正确使用 css 的 text-overflow 属性。

这种方法对服务器的压力会更小，尤其是当页面上有一堆描述时。使用 PHP 连接每一个不是有效的，也不是正确的方法。

删除一个类要简单得多。当您想显示较少时，您可以将其添加回来。

<style>
     .ellipsis {
         white-space: nowrap; 
         text-overflow: ellipsis; 
         overflow: hidden; 
         height: 14px;
     }
     .description {
         width: 300px;
         background: #ccc; 
         padding: 3px;
         margin-top: 30px;
         margin-bottom: 0;
     }
</style>

<!-- It is likely you would use a PHP loop for this but for illustration 
     purposes I've listed them out -->

<p class="description ellipsis"><?=$movie[0]['description']?></p>
<a href="#" class="read-more">Read More</a>

<p class="description ellipsis"><?=$movie[1]['description']?></p>
<a href="#" class="read-more">Read More</a>

<p class="description ellipsis"><?=$movie[2]['description']?></p>
<a href="#" class="read-more">Read More</a>

<!-- use as many as you want with no additional strain on server. -->

使用 JQUERY...http://jsfiddle.net/kx2nbv3z/

<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document)
        .on('click','.read-more',function() { 
            $(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis'); 
        })

        .on('click','.show-less',function() { 
            $(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis'); 
        })
    ;
</script>

纯 JAVASCRIPT...http://jsfiddle.net/8wsbw0u8/

<script>


if (document.body.addEventListener) {
    document.body.addEventListener('click',yourHandler,false);
}
else {
    document.body.attachEvent('onclick',yourHandler);//for IE
}

function yourHandler(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    prev = target.previousSibling.previousSibling;
    if (target.className.match(/read-more/)) {
        target.className="show-less";
        target.innerHTML = "Show Less";
        prev.setAttribute("class","description");
        console.log(prev);
    }
    else if (target.className.match(/show-less/)) {
        target.className="read-more";
        target.innerHTML = "Read More";
        prev.setAttribute("class","description ellipsis");
    }
}
</script>