javascript - 表格行文本 chop

Question

我有一个表，它在行级别具有更多/更少的功能。我需要在表级别包含“全部展开/折叠”选项，这样一次展开所有行会更容易。

在我当前的代码中，行级和表级扩展在单独的情况下工作得很好。

但是当我使用全部展开链接进行扩展时，行级更多/更少链接也应该一起起作用。目前，当单击 Expand All 链接时，行级更多/更少链接仍显示为 More 链接，但它应该会更改为 Less 链接。

这是我的代码，

var minimized_elements = $('.grid_moretext span');

    minimized_elements.each(function(){    
    var t = $(this).text();        
    if(t.length < 55) return;

    $(this).html(
    t.slice(0,55)+'<span>... </span>'+
    '<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
    );
    }); 
    $('a.tr_expand').click(function(event){
        event.preventDefault();
        $(this).parent().siblings().find("span.more_text").toggle();       
                if ($(".tr_expand").text() == "More") {
                    $(".tr_expand").text("Less");
                }
                else {
                    $(".tr_expand").text("More");
                }
    });
    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });
    $('a.less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
    });

    $('a.expand_all').click(function(event){
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();  
        if ($(".expand_all").text() == "Expand All") {
            $(".expand_all").text("Collapse All");
        }
        else {
            $(".expand_all").text("Expand All");
        }
    });

<强> DEMO

Answer 1

我更新了working fiddle with collapse

我做了以下更改:

使用$(this)设置单击的展开链接文本而不是整个类选择；

 $('a.tr_expand').click(function(event){
            event.preventDefault();
            $(this).parent().siblings().find("span.more_text").toggle(); 
             // console.log($(".tr_expand").text());
                    if ($(this).text() == "More") {
                        $(this).text("Less");
                    }
                    else {
                        $(this).text("More");
                    }

        });

在全部展开按钮中，循环浏览展开链接，如果链接有“更多”文本，则只需触发链接的单击，如果该行已展开，切换将再次折叠它，这不是预期的行为。

$('a.expand_all').click(function(event){
   event.preventDefault();
   $('a.tr_expand').each(function(){
      if($(this).text() == "More" && $('a.expand_all').text() == "Expand All" )
      {
          $(this).trigger('click');
      } 
      else if($(this).text() == "Less" && $('a.expand_all').text() == "Collapse All" )
      {
          $(this).trigger('click');
      } 

    });

    if ($(this).text() == "Expand All") {
         $(this).text("Collapse All");
     }
     else {
         $(this).text("Expand All");
     }
});