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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3551 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

current

addclass

index

21 条回复 • 2015-03-04 20:11:25 +08:00

blacktulip

2015-03-04 02:11:07 +08:00

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

shuding

2015-03-04 02:20:40 +08:00

直接化简的话是：

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

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

yyfearth

2015-03-04 02:21:32 +08:00

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

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

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>

cevincheung

2015-03-04 02:25:21 +08:00

siblings

blacktulip

2015-03-04 02:26:47 +08:00

@yyfearth 噢，确实如此，thanks

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.

ricorico

2015-03-04 07:31:09 +08:00 via iPad

Google 一下事件委托

FastMem

2015-03-04 09:32:29 +08:00

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

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

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