代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

自定义截断函数删除所有初始文本

  •  1
  • Razvan Zamfir  · 技术社区  · 7 年前

    我在做一个小的 显示更多/显示更少 jquery中的脚本。

    function ellipsizeTex(id) {
      var el = document.getElementById(id);
      var btn = $("#undo_truncate");
      var wordArray = el.innerHTML.split(' ');
      var initialHtml = el.innerHTML;
    
      var lessText = function() {
        while (el.scrollHeight > el.offsetHeight) {
          wordArray.pop();
          el.innerHTML = wordArray.join(' ') + '...';
        }
        btn.removeClass('hide-text').addClass('show-text').text("Show more");
      }
    
      var moreText = function() {
        el.innerHTML = initialHtml;
        el.style.height = "auto";
        btn.removeClass('show-text').addClass('hide-text').text("Show less");
      }
      lessText();
      btn.on('click', function(){
      	if($(this).hasClass('show-text')){
        	moreText();
        } else {
        	lessText();
        }
      });
    }
    
    ellipsizeTex('truncared');
    #truncared {
      padding: 0 10px;
      background: #fff;
      height: 72px;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
    <div class="subcategory-desc">
      <div id="truncared">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
          dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
        <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
      </div>
      <div class="text-center">
        <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
      </div>
    </div>

    这个脚本有一个bug,我已经能够发现:点击“显示更多”后,整个文本按预期显示 但是 当单击同一个按钮时,此时“显示较少”为文本,框中保留的所有内容都是“…”省略号。

    我做错什么了?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Guillaume Georges    7 年前

    moreText 函数,您将元素的高度设置为自动:

    el.style.height = "auto";
    

    在中还原此 lessText 函数,你就可以修复你的bug了。

    el.style.height = null;
    

    function ellipsizeTex(id) {
      var el = document.getElementById(id);
      var btn = $("#undo_truncate");
      var wordArray = el.innerHTML.split(' ');
      var initialHtml = el.innerHTML;
      
      var init = function() {
        while (el.scrollHeight > el.offsetHeight) {
       
          wordArray.pop();
          el.innerHTML = wordArray.join(' ') + '...';
        }
        btn.removeClass('hide-text').addClass('show-text').text("Show more");
      }
      
      var lessText = function() {
        el.style.height = null;
        el.innerHTML = wordArray.join(' ') + '...';   
        btn.removeClass('hide-text').addClass('show-text').text("Show more");    
      }
    
      var moreText = function() {
        el.innerHTML = initialHtml;
        el.style.height = "auto";
        btn.removeClass('show-text').addClass('hide-text').text("Show less");
      }
      init();
      btn.on('click', function(event) {
         event.preventDefault();
      	if($(this).hasClass('show-text')){
        	moreText();
        } else {
        	lessText();
        }
      });
    }
    
    ellipsizeTex('truncared');
    #truncared {
      padding: 0 10px;
      background: #fff;
      height: 72px;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
    <div class="subcategory-desc">
      <div id="truncared">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
          dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
        <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
      </div>
      <div class="text-center">
        <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
      </div>
    </div>