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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 4125 days ago, the information mentioned may be changed or developed.

在#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 replies • 2015-03-04 20:11:25 +08:00

blacktulip

Mar 4, 2015

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

shuding

Mar 4, 2015

直接化简的话是：

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

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

yyfearth

Mar 4, 2015

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

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

blacktulip

Mar 4, 2015

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

Mar 4, 2015

siblings

blacktulip

Mar 4, 2015

@yyfearth 噢，确实如此，thanks

EthanZ

Mar 4, 2015

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

Mar 4, 2015 via iPad

Google 一下事件委托

FastMem

Mar 4, 2015

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

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

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