如何透過 jquery 在字數過多時動態增加一個連結標籤？

jquery javascript css

AWEI 2021-05-14 00:18:59 ‧ 2183 瀏覽

分享至

大家好，我是一個超級菜鳥！
目前遇到一個問題，想了兩天還是做不出我要的狀態！

問題是：
有一個區塊需要限制最多容納兩行字，超過兩行字會隱藏並顯示**...顯示更多**的超連結可以點擊，一開始我使用了 CSS 的方式是這樣寫的！

使用 CSS 的方式
https://codepen.io/hong-wei/pen/vYgqRae

但現在需求變成不能只是出現... 要是出現這個字 ...顯示更多 並且是可以點擊的超連結，我也用 jquery 寫了一下，但不知道怎麼限制換行就改用限制字數了。

使用 Jquery
https://codepen.io/hong-wei/pen/yLMONqG

但是不太清楚怎麼在後面在字數超過的情況下增加一個超連結呢？
在此請教大家，謝謝大家的幫忙。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

rogeryao

iT邦超人 7 級 ‧ 2021-05-14 01:29:18

最佳解答

$(function(){
  let len = 50;
  $('.demo').each(function(){ 
    if($(this).html().length >len){   
	    var str=$(this).html().substring(0,len-1)+"..."+
	    "<a href='https://www.hinet.net/' target='_blank'>顯示更多</a>";
	    $(this).html(str);
	  } 
  });
});

Demo1

$(function(){
  let len = 50;
  $('.demo').each(function(){ 
	  var str1=""
	  switch ($(this).attr("id")){
	    case 'dd1' : str1="..."+"<a href='https://www.hinet.net/' target='_blank'>顯示更多</a>";
	      break;
	    case 'dd2' : str1="..."+"<a href='https://tw.yahoo.com/' target='_blank'>顯示更多</a>";
	      break;
	    default: str1="" 
    }
    //
    if($(this).html().length >len){   
      var str2=$(this).html().substring(0,len-1)+str1;
      $(this).html(str2);
    } 
  });
});

Demo2

回應
分享
檢舉

登入發表回應

通靈亡

iT邦高手 1 級 ‧ 2021-05-14 11:49:55

用上次的問題來衍伸：

<div class="content">
  <span class="description">
    uia, autem quod possimus quibusdam assumenda nulla mollitia dicta doloremque vitae cupiditate esse blanditiis. Impedit officiis ullam amet a corrupti, saepe totam quam reprehenderit nisi inventore id cum recusandae! Quae, repudiandae possimus! Sunt nisi ut maxime recusandae non optio? Id deleniti commodi exercitationem dignissimos corrupti suscipit totam illum assumenda sit ab vero placeat, voluptatem doloremque fugiat alias fugit sapiente. Vel iure dolorum tempore possimus, sint
  </span>
  <a href="#" onclick="showMoreOrLess(event)">More...</a> 
</div>

寫一個 .show_more Class，呈現展開兩行後的結果

.description{
  display: block;
  height: 2em;
  line-height: 1em;
  letter-spacing: 0;
  overflow: hidden;
}

.content .description.show_more {
  height: auto;
}

按下 More 時，用 JS 加入或拿掉 .show_more 來實現

function showMoreOrLess (event) {
  const clickButton = event.target
  const contentDiv = clickButton.parentElement
  const descriptionSpan = contentDiv.querySelector('.description')
  
  descriptionSpan.classList.toggle('show_more')
  
  if (descriptionSpan.classList.contains('show_more')) {
    clickButton.textContent = "Less" 
  } else {
    clickButton.textContent = "More..." 
  }
}

https://codepen.io/ted59438/pen/poRXKWp