初次尝试写简单的 js，请问下面这样的循环代码怎样精简／合并？

[70599]

在#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')
} );

[blacktulip]

loop through 每个 a , 给加上 同一个 event listener ，listener 里面用 target 判断是哪个 a 被点击

[shuding]

直接化简的话是：

https://gist.github.com/quietshu/c2c892816b3169367e31

不过感觉你的需求第二行不应该写 `$('*')`，这样效率好低的……

[yyfearth]

@blacktulip 应该用delegation绑定在#post-index 而不是给每个a绑定
然后listener 里面用 this 判断是哪个 a 被点击

另外 $('*') 不要随便用 这样可是选择所有元素啊 效率很低的
你可以用 $('a.current').removeClass('current') 来缩小范围
而且后面那个添加class的 可以直接用 $(this).addClass('current')

[blacktulip]

我只会写一点 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>

[cevincheung]

siblings

[blacktulip]

@yyfearth 噢，确实如此，thanks

[EthanZ]

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.

[ricorico]

Google 一下事件委托

[FastMem]

直接用this嘛，你这样好麻烦的！

$(".post-index a").click(function() {
$(this).addClass('current');
$(this).siblings().removeClass('current');
});

不知道符不符合，这个是删除同级a元素。

[arachide]

你这个时jquery化的js
很容易把js搞成一坨屎

[bzw875]

$("#post-index a").click(function(e){
$("#post-index a").removeClass('current');
$(e.target).addClass('current');
});

[muzuiget]

用 siblings() 就行了，再加上链式调用，一行就搞定了。

$('#post-index a').click(function() {
$(this).addClass('current').siblings().removeClass('current');
});

[sm0king]

@FastMem 我赞同这种写法。但他貌似是要选择 #post-index 下奇数的a 所以用 $("#post-index a:nth-child(Odd)") 吧？

[shuson]

献丑一个：
$('#post-index a').click(function(event){
event.preventDefault();
$(this).addClass('current')
$(this).siblings().removeClass('current');
});

[exceloo]

siblings就可搞定，上面已经有人提供代码了

[serenader]

http://codepen.io/anon/pen/OPwjJZ

不知道楼主是不是要这种效果。

[asd234ddd]

小白想问php代码哪个地方写。。

[unknownservice]

@sm0king nth-child()这是css了，jquery用$("#post-index a:odd")就行了。

[FastMem]

@unknownservice 我记得好像他那样写也是可以的，因为之前有个大神告诉我CSS的选择器 = JQ的选择器。不过我没试验过！

[unknownservice]

@FastMem 可以这么写，类似的还有eq()选择器，不过我是强迫症，能短点更好：)
说是完全想等倒也不是，JQ应该更多点，类似gt() lt() not这样的。

[xuyongli]

$("#post-index a").click(function() {
$('.current').removeClass('current')
$(this).addClass('current')
} );