Question

我有一个功能，当用户点击我页面上的按钮时，X相关的div删除了它的类，然后将该类应用于新的相应div。

我写了下面的内容，按照我的需要工作，我唯一关心的是它看起来很臃肿，如果我继续添加div，生病则必须添加更多按钮，以及更多点击功能。他们是更好的方法吗？

$('a.one').click(function(e){
        e.preventDefault();
        if ($('.active').parent().is(':last-child')) return;
        $('.active').removeClass('active').parent().find('div.one').addClass('active');
    });
    $('a.two').click(function(e){
        e.preventDefault();
        if ($('.active').parent().is(':last-child')) return;
        $('.active').removeClass('active').parent().find('div.two').addClass('active');
    });
    $('a.three').click(function(e){
        e.preventDefault();
        if ($('.active').parent().is(':last-child')) return;
        $('.active').removeClass('active').parent().find('div.three').addClass('active');
    });

http://jsfiddle.net/R4Cz2/

Answer 1

在这些元素的所有上添加一个附加类，然后使用data-*属性存储下一个元素的选择器。所以：

<a href="www.test.com" class="yourclass one" data-next="div.two">Test</a>
<a href="www.test.com" class="yourclass two" data-next="div.three">Test</a>
...

然后：

$('a.yourclass').click(function(e){
    e.preventDefault();
    if ($('.active').parent().is(':last-child')) return;
    $('.active').removeClass('active').parent().find($(this).data('next')).addClass('active');
});

Answer 2

我无法改进代码，因为我不知道实际的HTML结构，下面是我可以用提供的代码段做的最好的代码：

// you can give all these elements a common class name to avoid listing all of them
$('a.one, a.two, a.three').click(function(e){
    e.preventDefault();
    if ($('.active').parent().is(':last-child')) return;

    var $this = $(this);
    var divClassName = 'div';

    if($this.is('.one'))
        divClassName += '.one';
    else if($this.is('.two'))
        divClassName += '.two';
    else if($this.is('.three'))
        divClassName += '.three';

    $('.active').removeClass('active').parent().find(divClassName).addClass('active');
});

jQuery功能臃肿而且不必要？

2 个答案: