iT邦幫忙

0

如何透過 jquery 在特定解析度時畫面可以有所改變?

AWEI 2021-05-30 22:58:131330 瀏覽
  • 分享至 

  • xImage

大家好,我最近都在練習使用 jquery 來完成一些頁面上的效果!

我想要達成一個效果是在解析度 768px 以上時,當文字超過 50個字元時可以把多餘的文字隱藏,但在解析度 768px 以下時,可以讓文字在超過 100 個字元後才隱藏,並拿掉顯示更多的字樣。

目前已完成下列幾點~

  1. 可以設定超過多少文字就隱藏多餘文字,並增加一個顯示更多的按鈕。
  2. 在 768px 以下時可以拿掉顯示更多按鈕,(用 CSS 達成。)

但是查了網路上的一些教學,還是不太明白為什麼在解析度 768px 以下時,無法將文字設定成在超過 100 個字元時才把多餘文字隱藏,感覺還是跟 768px 以上的設定是一樣。

想請各位前輩幫我看看是否哪邊有寫錯呢?謝謝大家的觀看。
https://codepen.io/hong-wei/pen/VwprzQE?editors=1111

不太明白為什麼不用CSS來做設定呢?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
小魚
iT邦大師 1 級 ‧ 2021-05-31 07:21:10

你沒有隨時偵測啊,
好像是要偵測resize事件,
可以上網查看看,
你這個就只有一開始執行之後就沒再執行了.

AWEI iT邦新手 4 級 ‧ 2021-05-31 09:23:33 檢舉

我改了一下寫法~哈
好像還是失敗的....
https://codepen.io/hong-wei/pen/LYWOBBW?editors=1011

淺水員 iT邦大師 6 級 ‧ 2021-06-01 02:53:59 檢舉

我是覺得可以用 CSS 處理就好
畢竟文字所佔的空間跟中英文有關
單純用字數還是會有時寬,有時窄

以學習 JavaScript 與 jQuery 的角度的話,下面這個提供參考

$(function(){
    let moreHtml="<button class='info-more'>...顯示更多</button>";

    //蒐集要處理的元素,並儲存其原始文字
    let eleCollection=new Map();
    $('.info_content').each(function(idx, ele){
        eleCollection.set(ele, ele.textContent);
    });
    
    //處理 HTML Entities
    let div=document.createElement('div');
    function htmlspecialchars(str) {
        div.textContent=str;
        return div.innerHTML;
    }

    //初始化、畫面尺寸更新時要做的事
    function doHidden() {
        let len=$(window).width()<=768?100:70;
        eleCollection.forEach(function(text, ele){
            if(text.length<=len) {
                $(ele).html(htmlspecialchars(text));
            } else {
                $(ele).html(htmlspecialchars(text.slice(0, len))+moreHtml);
            }
        });
    }
    
    //掛載事件
    $(window).resize(doHidden);
    
    //直接執行一次
    doHidden();
});
AWEI iT邦新手 4 級 ‧ 2021-06-01 17:37:13 檢舉

謝謝潛水員的分享~
其實我有想過用 CSS 來的完成,但是需求是在 768px 以上時,超過兩行要出現顯示更多,兩行以下則是把顯示更多拿掉,因此我才想說是否要用 js 或是 jquery 來實現!

如果說用 CSS 來實現是像這樣嗎?
https://codepen.io/hong-wei/pen/OJpzzpr?editors=1111

我要發表回答

立即登入回答