0

我有一个功能，当用户单击我页面上的按钮时，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/

4

2 回答 2

4

在所有这些元素上添加一个附加类，然后使用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');
});
于 2013-01-30T16:58:00.810 回答
0

由于我不知道实际的 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');
});
于 2013-01-30T17:08:26.563 回答