作者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/cn.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