通过来自另一个页面的 jquery ajax 响应检索到的数据上越来越少的文本切换答案

【问题标题】：more and less text toggle on a data retrieved through jquery ajax response from another page通过来自另一个页面的 jquery ajax 响应检索到的数据上越来越少的文本切换
【发布时间】：2019-01-29 02:48:30
【问题描述】：

我正在创建一个小功能，在 jquery 中切换越来越少的文本，该数据一次检索一个数据，并在使用 ajax 单击按钮时从 getData 页面附加到 div 容器...问题是第一次按钮被点击数据被检索越来越少的文本功能工作正常但是当第二次点击按钮并且第二次检索数据并附加到 div 然后显示越来越少的文本适用于当前检索的数据但不是以前所有检索到的数据...有人请帮我解决这个问题...谢谢

recordsDisplay.html

<div id="container">
</div>
<button id="click">Click Me</button>

style.css：

a.morelink {
    color:red;
}
.morecontent span {
    display: none;

}

jquery：

var showChar = 150;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
$('#click').click(function(){
    $.ajax({
        url : "getData.html",
        method : "GET",
        success : function(response){
            $('#container').append(response);
            var mymore = $('#container').find('.more');
$(mymore).each(function() {

                var content = $(this).html();
                if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<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;
    });
}
        })

getData.html：

<h5 class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, ligula ornare viverra sodales, magna erat semper ante, non placerat nulla lorem id orci. Praesent auctor ultrices sodales. Etiam vitae eros nisi. Morbi dictum, turpis at varius ornare, ante diam dignissim erat, a vulputate eros massa sit amet quam. Donec viverra pharetra odio, nec porta libero sagittis ac. Nam porta ornare feugiat. Maecenas </h3>

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

var showChar = 150;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
      $('#click').click(function(){
       $.ajax({
          url : "getData.html",
          method : "GET",
          success : function(response){
            $('#container').append(response);
            var mymore = $('#container').find('.more');
            $(mymore).each(function() {
              var content = $(this).html();
              console.log(content);
              console.log(content.indexOf(ellipsestext) );
              if(content.length > showChar) {
                if (content.indexOf(ellipsestext) < 0){
                  var c = content.substr(0, showChar);
                  var h = content.substr(showChar, content.length - showChar);
                  var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';
                  $(this).html(html);
                }
              }
            });

          }
        });
      });
      $('body').on("click",".morelink",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;
      });

您每次获取新数据后都错过了一个条件，因为已经附加了格式为或多或少的 html，所以如果您再次编辑它，它将丢失更多数据。所以我添加了一个不再编辑旧数据的条件

它只是条件

if (content.indexOf(ellipsestext) < 0){

而且你也不需要放 $('.morelink').click() 函数在 ajax 调用中会产生一个甚至多次，所以更好的是在我给出的事件之外加载它并将它绑定到 body ，所以它也可以在动态元素上工作

$('body').on("click",".morelink",function(){

【讨论】：