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

jquery javascript css

AWEI 2021-05-30 22:58:13 ‧ 1322 瀏覽

分享至

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

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

目前已完成下列幾點～

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

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

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

一尾活熊 iT邦新手 5 級 ‧ 2021-05-31 14:36:04 檢舉

不太明白為什麼不用CSS來做設定呢？

登入發表討論

直播研討會

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

直播中

1 個回答

小魚

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

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

回應 3
分享
檢舉

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();
});