想問一個做法，假設原本事件需要 div，網頁一定要先放 div 嗎？

html js javascript

火爆浪子 2019-10-17 22:54:23 ‧ 2429 瀏覽

分享至

$(function() {
    $('#gotop').click(function() {
        jQuery('html, body').animate({
            scrollTop: 0
        }, 1000);
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#gotop').fadeIn('fast');
        } else {
            $('#gotop').stop().fadeOut('fast');
        }
    });
});

假設我需要一個 div 區塊「gotop」
我現在的做法是要把 <div id="gotop">↑</div> 放在網頁的某處
這是沒問題，只是會讓我必須要找個地方放這個 <div id="gotop">↑</div>
當然我還有其他類似的事件必需都要先準備區塊
所以 div 就會更多⋯⋯
請問有什麼方式透過程式產生
但至少我一開始不用自己放這些區塊？

不明

【＊＊此則訊息已被站方移除＊＊】

ccutmis iT邦高手 2 級 ‧ 2019-10-17 23:53:12 檢舉

ES6有個很不錯的東西叫作模版字符串（template literal）相關資源可以上網搜，鐵人賽有ES6文章的通常也會提到，建議找來看看，
我寫了一個簡單的template literal demo 給你參考:
http://www.web3d.url.tw/demo/USER/ccutmis/javascript-template-demo/

登入發表討論

直播研討會

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

直播中

4 個回答

dragonH

iT邦超人 5 級 ‧ 2019-10-17 23:00:16

最佳解答

請問有什麼方式透過程式產生

純 js

document.createElement('div')

或者你可以用 css 先隱藏

display: none

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-17 23:03:28 檢舉

了解，我也有想到這個
但假設像 jquery 就必須要有一個選擇器去 render 對嗎，變成是我又要放一個預設的 div 在那裡
$('#questions').append(i);

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-17 23:04:01 檢舉

我現在的作法確實是 display: none
只是 div 不少，放著不好看

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-17 23:04:44 檢舉

那如果是要加入那麼長的 ele 呢？
<div class="display-none page-loading-layout page-loading-layout-evt"><div class="page-loading-icon translate-middle"><img src="/images/loading.svg"></div></div>

dragonH iT邦超人 5 級 ‧ 2019-10-17 23:06:32 檢舉

但假設像 jquery 就必須要有一個選擇器去 render 對嗎

是

不然他不知道你要放哪

只是 div 不少，放著不好看

誰會去看

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-17 23:07:21 檢舉

應該是說我就必須要找到一個地方去「先放」這些 div ，這樣是常規做法嗎

dragonH iT邦超人 5 級 ‧ 2019-10-17 23:09:42 檢舉

那如果是要加入那麼長的 ele 呢？

就用 jquery append 直接加呀

用純 js 會又臭又長

你這個 element 會一直重複或者是差在裡面 data 不一樣嗎

是的話

你可能會需要 react 或 vue 那種 component 寫法

dragonH iT邦超人 5 級 ‧ 2019-10-17 23:11:40 檢舉

這樣是常規做法嗎

沒有一定怎麼做呀

除非會影響效能之類的

不然其實沒啥差

一般應該也不 care 成品 html 有多長

只會 care 真正的 code

然後用 css 有個好處就是

你可以先規劃要放哪

在直接藏起來

雖然 js 也可以就是

但 css 會比較簡單我覺得

咖咖拉 iT邦好手 1 級 ‧ 2019-10-18 08:53:14 檢舉

有什麼方式透過程式產生

我想這才是她想說的重點..

你可直接寫在JS裡面


document.write('<div id="gotop">XXXXX</div>">');
$(function() {
    $('#gotop').click(function() {
        jQuery('html, body').animate({
            scrollTop: 0
        }, 1000);
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#gotop').fadeIn('fast');
        } else {
            $('#gotop').stop().fadeOut('fast');
        }
    });
});

登入發表回應