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 に答える