表行文本截断

Question

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

在我当前的代码中，行级和表级展开可以很好地处理单个代码。

但是，当我使用Expand All链接进行扩展时，行级多/少链接也应该一起操作。当前，当单击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");
        }
    });

演示

Answer 1

我更新了一个工作摆弄塌陷

我所作的修改如下：

使用$(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");
     }
});

Answer 2

演示

两件事

One

$('a.tr_expand').click(function(event){
    event.preventDefault();
    $(this).parent().siblings().find("span.more_text").toggle();       
    //use $(this) to target current anchor element and check its text with .html
    if ($(this).html() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

2

在expand_all事件中，click再次根据当前值更改html

$('a.expand_all').click(function(event){
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();    
    var elem=$(this).next().find('.tr_expand')
    if(elem.html()=="More")//check for html again
        elem.text('Less');
    else
        elem.text('More');
});

更新

演示

将class添加到tr_expand中，同时单击自身和Expand All以确定它是否已经展开或折叠，如下所示：

$('a.tr_expand').click(function(event){
    event.preventDefault();
    var elem=$(this).parent().siblings().find("span.more_text");//store reference to element's more_text
    elem.toggle();//toggle it
    $(this).toggleClass('expand');//toggleClass expand
    if ($(this).html().trim() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

接下来，在Expand_all上单击循环，遍历每个tr_expand及其siblings，然后根据tr_expand上存在的类切换它，如下所示：

$('a.expand_all').click(function(event){
    event.preventDefault();
    $('.tr_expand').each(function(){
        var elem=$(this);
        if(!elem.hasClass('expand'))//check if element is already expanded
        {
            //if no find all its `grid_moretext` element and toggle its span.more_text
            elem.closest('td').siblings(".grid_moretext").each(function(){
               $(this).find("span.more_text").toggle();    
            });
            if(elem.html()=="More")
            {
                $('a.expand_all').text('Collapse All')
                elem.text('Less');
            }
            else
            {
                $('a.expand_all').text('Expand All')
                elem.text('More');
            }
        }
        else
            elem.toggleClass('expand'); //if expand is not there add it again
    });
});

Answer 3

使用this，以便它将引用单击的More链接。

if ($(this).text() == "More") {
  $(this).text("Less");
}
else {
  $(this).text("More");
}