个人中心
gpt4 book ai didi

javascript - Jquery 长段落显示更多/显示更少链接不起作用

转载 作者：行者123 更新时间：2023-11-28 05:16:34 25 4
gpt4 key购买 nike

我试图对此进行编码，“阅读更多”链接工作正常，但“显示更少”链接则不然。我无法检测到错误。在此代码中，有一个带有 class="show-less" 的 anchor 标记，我试图使用它来隐藏 class="spanTxt" 的 span 元素，但出了点问题并且它没有隐藏 span 元素。我不明白，如果我可以在“阅读更多”链接中执行 display:inline 那么为什么当我在“显示更少”链接中执行 display:none 时它不起作用。

提前致谢:)

        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery Add Read More Link</title>
    <script type="text/javascript"   src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var maxLength = 300;
        $(".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).replaceWith('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>');
            }
        });
        $(".read-more").click(function(){
            $(".spanTxt").css("display","inline");
            $(".show-read-more").append('<a href="#" class="show-less">show   less...</a>');
            $(this).hide();
        });



    $(".show-less").click(function(){
            $(".spanTxt").css("display","none");


        });
    });
    </script>
    <style type="text/css">

    </style>
    </head>
    <body>
          <p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
            dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
            fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
            laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
            nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
            erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
            am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
            Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
            osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
            sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
            us et metus semper porttitor. Sed pellentesque ex at 
            pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
            commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
            ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
            s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
            lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
            hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
            Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
            nteger eu dignissim lectus, commodo eff
            icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
            andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
            mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
            Etiam scelerisque nisi magna. Nulla facilisi. 
            Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>


    </body>
    </html>

最佳答案

您遇到了几个问题(有些导致代码无法工作，有些导致工作正常，但仅限于第一个 p.show-read-more 元素。

修复方法如下:

$(document).ready(function(){
  var maxLength = 300;
  $(".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);
      var newP = $('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>')
      newP.append($('<a href="#" class="show-less">show   less...</a>').hide())
      $(this).replaceWith(newP);
    }
  });
  $(".read-more").click(function(){
    $(this).parent('.show-read-more').find('.spanTxt').css("display","inline");
    $(this).parent('.show-read-more').find('.show-less').show();
    $(this).hide();
  });
  $(document).on('click', '.show-less', function(){
    $(this).parent('.show-read-more').find('.read-more').show();
    $(this).parent('.show-read-more').find(".spanTxt").hide();
    $(this).hide();
  });
});
<script type="text/javascript"   src="http://code.jquery.com/jquery.min.js"></script>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
  dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
  fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
  laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
  nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
  erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
  am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
  Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
  osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
  sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
  us et metus semper porttitor. Sed pellentesque ex at 
  pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
  commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
  ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
  s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
  lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
  hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
  Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
  nteger eu dignissim lectus, commodo eff
  icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
  andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
  mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
  Etiam scelerisque nisi magna. Nulla facilisi. 
  Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
  dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
  fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
  laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
  nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
  erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
  am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
  Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
  osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
  sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
  us et metus semper porttitor. Sed pellentesque ex at 
  pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
  commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
  ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
  s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
  lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
  hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
  Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
  nteger eu dignissim lectus, commodo eff
  icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
  andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
  mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
  Etiam scelerisque nisi magna. Nulla facilisi. 
  Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

关于javascript - Jquery 长段落显示更多/显示更少链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40938272/

25 4 0
文章推荐： javascript - Emberjs 绑定(bind) Ember 对象中的属性
文章推荐： javascript - 仅当 CSS 类存在时才运行 jQuery 函数
文章推荐： html - 在列表元素内的(链接)标签内垂直对齐跨度
文章推荐： javascript - 如何可靠地测量 React 组件的弹出框和标注的计算位置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com