PTT數位生活區 / Web_Design

[問題] 如何整合JQ裡面的程式碼(附P幣)

看板Web_Design作者 (小熊一個)時間6年前 (2018/12/19 10:11), 編輯推噓3(3推 0噓 13→)
留言16則, 6人參與, 6年前最新討論串1/1
我舉個例子 例如: $(".title1").click(function(){$(".data1").show().siblings().hide();}); $(".title2").click(function(){$(".data2").show().siblings().hide();}); $(".title3").click(function(){$(".data3").show().siblings().hide();}); $(".title4").click(function(){$(".data4").show().siblings().hide();}); . . . 等等 當點title1區塊的時候 data1的區塊內容會顯示 因為title1跟data1的class差的有點遠 所以沒辦法像data11一樣可以控制鄰近的元素 寫久了會覺得很長一段 想詢問一下 像這樣是否能夠縮短程式碼呢? 我自己想到的方式是 當點擊.title+"i"的 元素時 對應到.data+"i"的元素會有效果 但是用for迴圈又怪怪的 ...反正就卡在這 請求高手幫解 附上P幣 888 做為報酬 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.13.116.2 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1545185503.A.92A.html
→
12/19 10:38, 6年前 , 1F
我記得用迴圈是可以的，或是html添上data-target=data1
12/19 10:38, 1F
→
12/19 10:38, 6年前 , 2F
，class=‘allTitle title1’. 然後click（.allTitle）
12/19 10:38, 2F
→
12/19 10:38, 6年前 , 3F
來觸發
12/19 10:38, 3F
→
12/19 10:40, 6年前 , 4F
如果title1沒有寫style，那就刪掉
12/19 10:40, 4F
推
12/19 13:54, 6年前 , 5F
把title要控制的data css class放在title的data-*屬性
12/19 13:54, 5F
→
12/19 13:55, 6年前 , 6F
然後用jq的on 加上title class去寫click事件處理
12/19 13:55, 6F
→
12/19 13:55, 6年前 , 7F
這樣title class只要一個 dataN就等click觸發時再取出
12/19 13:55, 7F
→
12/19 13:59, 6年前 , 8F
Array.prototype.map.call(document.querySelectorAll(‘bu
12/19 13:59, 8F
→
12/19 13:59, 6年前 , 9F
tton’), (el, index)=>{el.addEventListener(‘click’, (
12/19 13:59, 9F
→
12/19 13:59, 6年前 , 10F
)=>{$(‘button’)[index].hide()})})
12/19 13:59, 10F
推
12/19 14:05, 6年前 , 11F
event delegation
12/19 14:05, 11F
推
12/19 14:27, 6年前 , 12F
12/19 14:27, 12F
→
12/19 14:37, 6年前 , 13F
用data還可以無視順序
12/19 14:37, 13F
→
12/19 23:24, 6年前 , 14F
12/19 23:24, 14F
→
12/19 23:25, 6年前 , 15F
看Examples的第一個範例.直接用.index()
12/19 23:25, 15F
→
12/19 23:25, 6年前 , 16F
去取得title的Index即可.
12/19 23:25, 16F
‣ 更多 sunbear928 的文章
文章代碼(AID): #1S6QZVag (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 sunbear928 的文章
文章代碼(AID): #1S6QZVag (Web_Design)