iT邦幫忙

1

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

  • 分享至 

  • xImage
$(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 }} |
{{ formatDate(item.duration) }}
直播中
4
dragonH
iT邦超人 5 級 ‧ 2019-10-17 23:00:16
最佳解答

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

純 js

document.createElement('div')

或者你可以用 css 先隱藏

display: none
看更多先前的回應...收起先前的回應...
火爆浪子 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 不少,放著不好看

誰會去看 /images/emoticon/emoticon01.gif

火爆浪子 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');
        }
    });
});

3

這邊還是一個觀念給你。先了解你的需求,再來了解你的設計理念性。
依其gotop來說好了。它確實可以不需要事先先放置div上去。
但如果你不事先放置上去的話。那你就得在判斷上增加新建元件及移除元件的相關設計出來。
在設計上會有其麻煩性。

所以當然是事先先將元件置放好。這樣在做處理就會比較單純許多。

程式開發裏沒有任何的決定是對跟錯。是否要事先放好div並沒有一定的決定性。
依情況不同,有些事先放是好的。有時候反而事先放不好。

這樣的問題,你要自已來決定對還是不對。

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-18 05:21:19

不用div
那你是要用 body嗎....

阿不然是另外append上去
你的問題真的很有意思

0
豬豬人
iT邦新手 4 級 ‧ 2019-10-18 09:32:47

你可以用引入檔案的方式??

我要發表回答

立即登入回答