在#post-index的div里,有若干个a,想要给被点击的a加上名为current的class,同时删除其他a上名为current的class。
下面是我自己写的,可用,但是很冗长。
请问这样的循环代码如何精简/合并?
$("#post-index a:nth-child(1)").click(function() {
$('*').removeClass('current')
$('#post-index a:nth-child(1)').addClass('current')
} );
$("#post-index a:nth-child(3)").click(function() {
$('*').removeClass('current')
$('#post-index a:nth-child(3)').addClass('current')
} );
$("#post-index a:nth-child(5)").click(function() {
$('*').removeClass('current')
$('#post-index a:nth-child(5)').addClass('current')
} );
$("#post-index a:nth-child(7)").click(function() {
$('*').removeClass('current')
$('#post-index a:nth-child(7)').addClass('current')
} );
1
blacktulip 2015-03-04 02:11:07 +08:00
loop through 每个 a , 给加上 同一个 event listener ,listener 里面用 target 判断是哪个 a 被点击
|
2
shuding 2015-03-04 02:20:40 +08:00
|
3
yyfearth 2015-03-04 02:21:32 +08:00 1
@blacktulip 应该用delegation绑定在#post-index 而不是给每个a绑定
然后listener 里面用 this 判断是哪个 a 被点击 另外 $('*') 不要随便用 这样可是选择所有元素啊 效率很低的 你可以用 $('a.current').removeClass('current') 来缩小范围 而且后面那个添加class的 可以直接用 $(this).addClass('current') |
4
blacktulip 2015-03-04 02:24:18 +08:00
我只会写一点 Vanilla JavaScript ,你自己翻译成 jQuery 吧...
<p id="post-index"> <a class="current" href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </p> <script> var links = document.querySelectorAll("a"); for (var i = 0; i < links.length; i++) { links[i].addEventListener("click", function(event) { for (var j = 0; j < links.length; j++) { links[j].className = ""; } event.target.className = "current"; }); } </script> |
5
cevincheung 2015-03-04 02:25:21 +08:00
siblings
|
6
blacktulip 2015-03-04 02:26:47 +08:00
@yyfearth 噢,确实如此,thanks
|
7
EthanZ 2015-03-04 06:40:10 +08:00
Can't type Chinese.
Are you trying to implement a ratio button? If not, make a function to clear all "current" class, and add new class on 'click' in another function, in this case it's more flexible. function clearCurrent() {$('.current').removeClass('current')} $('#post-index a').on('click', function() {$(this).addClass('current')} or use trigger, depends on your requirement. You should really post your requirement(like implement multiselect in js), then we may provide you a more efficient solution. |
8
ricorico 2015-03-04 07:31:09 +08:00 via iPad
Google 一下事件委托
|
9
FastMem 2015-03-04 09:32:29 +08:00
直接用this嘛,你这样好麻烦的!
$(".post-index a").click(function() { $(this).addClass('current'); $(this).siblings().removeClass('current'); }); 不知道符不符合,这个是删除同级a元素。 |
10
arachide 2015-03-04 09:39:12 +08:00
你这个时jquery化的js
很容易把js搞成一坨屎 |
11
bzw875 2015-03-04 09:41:26 +08:00
$("#post-index a").click(function(e){
$("#post-index a").removeClass('current'); $(e.target).addClass('current'); }); |
12
muzuiget 2015-03-04 10:27:22 +08:00
用 siblings() 就行了,再加上链式调用,一行就搞定了。
$('#post-index a').click(function() { $(this).addClass('current').siblings().removeClass('current'); }); |
13
sm0king 2015-03-04 10:30:08 +08:00
@FastMem 我赞同这种写法。但他貌似是要选择 #post-index 下奇数的a 所以用 $("#post-index a:nth-child(Odd)") 吧?
|
14
shuson 2015-03-04 10:35:03 +08:00
献丑一个:
$('#post-index a').click(function(event){ event.preventDefault(); $(this).addClass('current') $(this).siblings().removeClass('current'); }); |
15
exceloo 2015-03-04 10:48:57 +08:00
siblings就可搞定,上面已经有人提供代码了
|
16
serenader 2015-03-04 11:06:11 +08:00
|
17
asd234ddd 2015-03-04 11:27:25 +08:00 via Android
小白想问php代码哪个地方写。。
|
18
unknownservice 2015-03-04 15:13:47 +08:00
@sm0king nth-child()这是css了,jquery用$("#post-index a:odd")就行了。
|
19
FastMem 2015-03-04 16:04:09 +08:00
@unknownservice 我记得好像他那样写也是可以的,因为之前有个大神告诉我CSS的选择器 = JQ的选择器。不过我没试验过!
|
20
unknownservice 2015-03-04 16:29:36 +08:00
@FastMem 可以这么写,类似的还有eq()选择器,不过我是强迫症,能短点更好:)
说是完全想等倒也不是,JQ应该更多点,类似gt() lt() not这样的。 |
21
xuyongli 2015-03-04 20:11:25 +08:00
$("#post-index a").click(function() {
$('.current').removeClass('current') $(this).addClass('current') } ); |