0 
$('a#golf-link').click(function () {
    $('ul#golf').fadeIn(500);
    $('ul.img-list').not('#golf').fadeOut(200);
    $('a#golf-link').addClass("current-link");
    $('.side-menu li a').not('#golf-link').removeClass("current-link");
    });
$('a#bags-link').click(function () {
    $('ul#bags').fadeIn(500);
    $('ul.img-list').not('#bags').fadeOut(200);
    $('a#bags-link').addClass("current-link");
    $('.side-menu li a').not('#bags-link').removeClass("current-link");
    });
$('a#keyrings-link').click(function () {
    $('ul#keyrings').fadeIn(500);
    $('ul.img-list').not('#keyrings').fadeOut(200);
    $('a#keyrings-link').addClass("current-link");
    $('.side-menu li a').not('#keyrings-link').removeClass("current-link");
    });

ご覧のとおり、上記のコードは反復的であり、単純化したいと思います。

ここで正しい用語を使用しているかどうかはわかりませんが、その要点を理解する必要があります。

私がやりたいのは、そのような関数を作成することです

$('a#l-//VARIABLE-HERE//-link').click(function () {
    $('div#l-//VARIABLE-HERE//').fadeIn(500);
    $('div.clothes-type').not('#l-//VARIABLE-HERE//').fadeOut(200);
    $('a#l-//VARIABLE-HERE//-link').addClass("current-link");
    $('.side-menu li a').not('#l-//VARIABLE-HERE//-link').removeClass("current-link");
    });

関数を呼び出して//VARIABLE-HERE//をゴルフ、バッグ、キーリングなどに置き換える必要があります。

どんな助けでも大歓迎です。

ありがとう。

4

6 に答える 6

3

最も単純化されるのは、3つのオブジェクトセットすべてに共通のクラスを使用して、同じコードがどこでも機能するようにすることです。ただし、より具体的に推奨する方法を知るには、実際のHTMLを確認する必要があります。

次に、クリックハンドラーを設定し、クリックアクションを実行する1つのパラメーターを受け取る単一の関数を作成できます。

function configureClick(item) {
    $('a' + item + '-link').click(function() {
        $('ul' + item).fadeIn(500);
        $('ul.img-list').not(item).fadeOut(200);
        $('a' + item + '-link').addClass("current-link");
        $('.side-menu li a').not(item + '-link').removeClass("current-link");
    });
}

configureClick("#golf");
configureClick("#bags");
configureClick("#keyrings");

最後に、実際のHTMLを表示すると、タグと識別子を組み合わせたさまざまなアイテムの間に幾何学的な配置があり、特定のクリックで作業するアイテム（親、兄弟、タグタイプ、等...）。

于 2011-08-11T01:23:11.583 に答える
1

命名規則が一定であると仮定すると、次のようになります。

function setItUp(objName) {
    $('a#' + objName + '-link').click(function() {
    $('ul#' + objName).fadeIn(500);
        $('ul.img-list').not('#' + objName).fadeOut(200);
        $('a#' + objName + '-link').addClass("current-link");
        $('.side-menu li a').not('#' + objName + '-link').removeClass("current-link");
    });
}

次に、電話をかけます。

setItUp('golf');
setItUp('bags');
setItUp('keyrings');
于 2011-08-11T01:34:51.627 に答える
0

このようなものが機能するはずです

$('a[id$="-link"]').click(function () {

    itemName =  $(this).attr('id').replace("-link","");

    $('div#'+itemName).fadeIn(500);
    $('div.clothes-type').not('#l-'+itemName).fadeOut(200);
    $('a#l-'+itemName +'-link').addClass("current-link");
    $('.side-menu li a').not('#l-'+itemName +'-link').removeClass("current-link");        

});
于 2011-08-11T01:33:14.770 に答える
0

これを使用する

$('a#golf-link,a#bags-link,a#keyrings-link').click(function () {
    var currentId = $(this).attr('id');
    var currentType = currentId.replace("-link", "");

    $('ul#'+currentType).fadeIn(500);
    $('ul.img-list').not('#'+currentType).fadeOut(200);
    $('a#'+currentId).addClass("current-link");
    $('.side-menu li a').not('#'+currentId).removeClass("current-link");

});
于 2011-08-11T01:37:33.747 に答える
0 
$('a[id$="-link"]').click(function () {
    var idVal = "#" + this.id.match(/(.*)-link/)[1]
    $('ul'+idVal).fadeIn(500);
    $('ul.img-list').not(idVal).fadeOut(200);
    $('a'+idVal+'-link').addClass("current-link");
    $('.side-menu li a').not(idVal+'-link').removeClass("current-link");
    });

それはうまくいくはずです。

于 2011-08-11T01:38:02.853 に答える
0

このことを考慮：

$(menu).click(function(e) {
    var id = e.target.id.split('-')[0],
        clss = 'current-link';

    $(e.target).closest('li').addClass(clss).siblings().removeClass(clss);
    $('#' + id, imgslist).fadeIn(500).siblings(':visible').fadeOut(200);
});

ここmenuで、は.side-menu要素であり、imglistは.img-list要素です。次のように、ページの読み込み/DOMの準備ができたときにこれらの参照を定義することをお勧めします。

var menu = $('.side-menu')[0],
    imglist = $('.img-list')[0];

（もちろん、これらの要素がページ上で静的である場合にのみこれを行ってください）

ところで、クラスはANCHOR要素ではなくLI要素に設定されると定義しました。これは、JavaScriptコードをより単純で読みやすくするためです（また、CSSでは、を表す最も外側の要素にクラスを定義することをお勧めします。エンティティ）。

于 2011-08-11T01:51:50.593 に答える