作者sunbear928 (小熊一個)
看板Web_Design
標題[問題] 如何整合JQ裡面的程式碼(附P幣)
時間Wed Dec 19 10:11:41 2018
我舉個例子 例如:
$(".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://webptt.com/m.aspx?n=bbs/Web_Design/M.1545185503.A.92A.html
1F：→ Nonsense8: 我記得用迴圈是可以的，或是html添上data-target=data1 12/19 10:38
2F：→ Nonsense8: ，class=‘allTitle title1’. 然後click（.allTitle） 12/19 10:38
3F：→ Nonsense8: 來觸發 12/19 10:38
4F：→ Nonsense8: 如果title1沒有寫style，那就刪掉 12/19 10:40
5F：推 ian90911: 把title要控制的data css class放在title的data-*屬性 12/19 13:54
6F：→ ian90911: 然後用jq的on 加上title class去寫click事件處理 12/19 13:55
7F：→ ian90911: 這樣title class只要一個 dataN就等click觸發時再取出 12/19 13:55
8F：→ jherk: Array.prototype.map.call(document.querySelectorAll(‘bu 12/19 13:59
9F：→ jherk: tton’), (el, index)=>{el.addEventListener(‘click’, ( 12/19 13:59
10F：→ jherk: )=>{$(‘button’)[index].hide()})}) 12/19 13:59
11F：推 InfinityGate: event delegation 12/19 14:05
13F：→ hooy2013: 用data還可以無視順序 12/19 14:37
15F：→ PretenderY: 看Examples的第一個範例.直接用.index() 12/19 23:25
16F：→ PretenderY: 去取得title的Index即可. 12/19 23:25