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

Question

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

记录显示.html

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

样式.css :

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

}

查询：

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;
    });
}
        })

获取数据.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>

Answer 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(){