时间戳

首页 > 解决方案 > 在 JQuery 中将 HTML 添加到段落中时，阅读更多按钮不起作用

jquery - 在 JQuery 中将 HTML 添加到段落中时，阅读更多按钮不起作用

问题描述

我正在尝试使用 HTML 内容实现阅读更多按钮。当我添加简单的文本时，它工作正常。class="show-read-more"我想在里面添加带有阅读更多按钮的HTML 。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxLength = 100;
$(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
        $(this).append('<span class="more-text">' + removedStr + '</span>');
     }
     });
     $(".read-more").click(function(){
     $(this).siblings(".more-text").contents().unwrap();
     $(this).remove();
   });
 });
</script>
<style type="text/css">
.show-read-more .more-text{
    display: none;
}
</style>
</head>
<body>
<p class="show-read-more"><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industries standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></p>
</body>
</html>

标签： jquery

解决方案

这是一个基于您提供的代码的工作示例 -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery Add Read More Link</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="show-read-more">
        <h2>What is Lorem Ipsum?</h2>
        <p>
            <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industries
            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
            specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
            recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var maxLength = 100;
            $(".show-read-more").each(function () {
                var myStr = $(this).text();
                if ($.trim(myStr).length > maxLength) {
                    var newStr = myStr.substring(0, maxLength);
                    var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
                    $(this).empty().html(newStr);
                    $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
                    $(this).append('<span class="more-text">' + removedStr + '</span>');
                }
            });
            $(".read-more").click(function () {
                $(this).siblings(".more-text").contents().unwrap();
                $(this).remove();
            });
        });
    </script>
    <style type="text/css">
        .show-read-more .more-text {
            display: none;
        }
    </style>
</body>

</html>

一切都按您的意愿工作，您做错的唯一一件事是您没有正确订购代码，如果您有进一步的疑问，请告诉我..

推荐阅读