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

[sunbear928 (小熊一個)]

我舉個例子  例如:

$(".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
→ Nonsense8: 我記得用迴圈是可以的，或是html添上data-target=data1
→ Nonsense8: ，class=‘allTitle title1’. 然後click（.allTitle）
→ Nonsense8:  來觸發
→ Nonsense8: 如果title1沒有寫style，那就刪掉
推 ian90911: 把title要控制的data css class放在title的data-*屬性
→ ian90911: 然後用jq的on 加上title class去寫click事件處理
→ ian90911: 這樣title class只要一個 dataN就等click觸發時再取出
→ jherk: Array.prototype.map.call(document.querySelectorAll(‘bu
→ jherk: tton’), (el, index)=>{el.addEventListener(‘click’, (
→ jherk: )=>{$(‘button’)[index].hide()})})
推 InfinityGate: event delegation
推 hooy2013: https://codepen.io/anon/pen/qLqrJL?editors=1010
→ hooy2013: 用data還可以無視順序
→ PretenderY: https://api.jquery.com/index/
→ PretenderY: 看Examples的第一個範例.直接用.index()
→ PretenderY: 去取得title的Index即可.