Question

我目前有这个jquery代码来设置当前的类，我有点像jquery的新手，并想知道如何使这个更干净，更紧凑。它目前有效，但我想知道如何做得更好。

// add class current
$('.textResizing ul .normal a').click(function () {
    $('.textResizing ul .normal a').addClass('current');
    $('.textResizing ul .medium a').removeClass('current');
    $('.textResizing ul .large a').removeClass('current');
});

$ ('.textResizing ul .medium a').click(function () {
    $('.textResizing ul .medium a').addClass('current');
    $('.textResizing ul .normal a').removeClass('current');
    $('.textResizing ul .large a').removeClass('current');
});

$ ('.textResizing ul .large a').click(function () {
    $('.textResizing ul .large a').addClass('current');
        $('.textResizing ul .normal a').removeClass('current');
    $('.textResizing ul .medium a').removeClass('current');
});

Answer 1

不确定你的html是什么样子但是这样的？：

$('.textResizing ul a').click(function () {
    $('.textResizing ul a').removeClass('current');
    $(this).addClass('current');
});

Answer 2

嗯，你们可以缓存选择器。这是jq中最简单，最有用的优化，因为每次使用seletors时，jq都需要解析dom来查找元素。所以：

// add class current
var na = $('.textResizing ul .normal a'),
    ma = $('.textResizing ul .medium a'),
    la = $('.textResizing ul .large a');

na.click(function () {
   this.addClass('current');
   ma.removeClass('current');
   la.removeClass('current');
});

ma.click(function () {
   this.addClass('current');
   na.removeClass('current');
   la.removeClass('current');
});

la.click(function () {
   this.addClass('current');
   na.removeClass('current');
   ma.removeClass('current');
});

jquery在锚标签上设置当前类

2 个答案: