iT邦幫忙

0

將擴充輪播插件重複至入兩次後,變成點擊一次按鈕可是會切換兩次

  • 分享至 

  • xImage

有點難敘述狀況,所以直接附上網址
http://www.sldesign.url.tw/demo/demo.htm
我把變數更改後重寫一次,原本只有一組的時候
點擊都很正常,但是兩個或多個以上就會連跳
附上我的js
http://www.sldesign.url.tw/demo/js/stacking.js
在此菜鳥感謝大家

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
Leo
iT邦新手 3 級 ‧ 2019-08-31 21:16:25
最佳解答

看起來是因為你已經在 stacking.js 裡個別對 #stage#stage2 都做了處理與事件的監聽,但是在 HTML 裡你又呼叫了 $('#stage').stack()$('#stage2').stack() ,所以等於做了兩次事件監聽,當然會做兩次動作。

建議你可以用 this 重構,令 stack 只針對使用它的那個元素做處理,才不會再發生類似的事情。

1
dragonH
iT邦超人 5 級 ‧ 2019-08-31 22:42:10

真快就結案了XD

打到一半就照貼了/images/emoticon/emoticon33.gif

codepen

最主要的問題就是

因為你綁了兩次 .stack

然後你的 stack 又寫了所有的 stage 的動作

所以最簡單要達到你原本的目的

就是把你原本 code 綁的第二個 stack 拿掉

就會是你要的結果了

不過即使這樣你的 code 也還是有很大的問題

幾乎不可重複利用

應該要向樓上 leo大 所說

重構你的 code

對被觸發 event 的 stack 來進行 animation

甚至

把一些重複的部分也寫進去 stack 裡

e.g. next/previous button

然後

日後有需要類似的功能

理想情況

就 import 此 js

然後 html 只需補上

<div class = "stage">
    <img>...
    <img>...
    <img>...
</div>

就可以了

然後寫更多的 animation

打包起來

放到 github 上騙星星XD/images/emoticon/emoticon07.gif

我要發表回答

立即登入回答