1

初心者の Javascript ヘルプを探しています。

コールアウトからのクリックに続いて、JQuery を使用していくつかのスライダー コンテンツを追加および削除する一連の単純な関数があります。どのカテゴリ (「cat1」など) のコンテンツでも動作するようにこれを書き直すにはどうすればよいですか?

$('.cat1_link').click(function(event) {
    $('.category_slides li').fadeOut();
    $('.cat1').fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.cat1').addClass('current');
});
$('.cat2_link').click(function(event) {
    $('.category_slides li').fadeOut();
    $('.cat2').fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.cat2').addClass('current');
});
4

2 に答える 2

4

HTML を次のように変更します。

<a class="cat_link" data-category="cat1" ...>

次に、jQuery を次のように記述できます。

$('cat_link').click(function(event) {
    var cat_class = $(this).data('category');
    $('.category_slides li').fadeOut();
    $('.'+cat_class).fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.'+cat_class).addClass('current');
});
于 2013-04-30T09:43:02.327 に答える
2

変化する「もの」を抽出し、同じ「もの」の汎用関数を作成します。最初の刺し傷は次のようになります

$.each(['cat1', 'cat2'], function (i, e) {

    $('.' + e + '_link').click(function(event) {
        $('.category_slides li').fadeOut();
        $('.' + e).fadeIn();
        $('article.listitem').removeClass('current');
        $('article.listitem.' + e).addClass('current');
    });

});

マークアップがどのように見えるか (およびそれを変更するコントロールがあるかどうか) に応じて、これを行うためのより簡潔な方法が存在する可能性があります。

于 2013-04-30T09:40:44.013 に答える