0

選択内容に応じて表示と非表示を切り替える小さな jquery 関数があります。これらのうち 2 つを同じページで実行していますが、それぞれに独自のデータが選択項目に添付されています。以下の関数を整理するにはどうすればよいか考えていました- #rearq / #rearw の変数を作成するには、.attr 関数を使用して ID を見つけ、それぞれに何らかのものを使用しますか?

$('#rearw li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearw li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearw-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });
    $('#rearq li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearq li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearq-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });

これは私がこれまでに持っているものです:

var control = $('.control ul').attr('id'); // Get the id e.g #rearw / #rearq

$(control).each(function (index) {
    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
}

どんなヘルプ/ポインタも大歓迎です!

4

4 に答える 4

1

#id(control) と一緒にid セレクターが必要です

変化する

$(control)

に

$('#'+control);
于 2013-09-06T11:38:57.300 に答える
1

コードを変更するだけです：

var control = $('.control ul').attr('id');

これに：

var control = '#' + $('.control ul').attr('id');

また、 IDは DOM で一意であると想定されているため、ここで each ループを使用する必要はありません。したがって、それを削除して、次のようなコードを使用できます。

$(control + ' li a').click(function (ev) {
    ev.preventDefault();
    var id = $(this).data('id');
    $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
    $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
});

アップデート

あなたのコード

var control = $('.control ul').attr('id');

ID は 1 つしか与えられないため、これを行うことができます。ロジックは同じですが、少し変更されています。

$('.control ul').each(function () {
    var control = '#' + this.id;

    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
});
于 2013-09-06T11:44:35.020 に答える
1 
$('#rearw li a, #rearq li a').click(function(ev){
    ev.preventDefault();
    var id = $(this).data('id'), 
        parent = $(this).closest('ul'), // assuming #rearw and #rearq are <ul> elements
        parentId = parent.attr('id'); // get 'rearw' or 'rearq'
    parent.find('a').not($(this).toggleClass('selected')).removeClass('selected');
    $('#' + parentId +'-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
});
于 2013-09-06T11:45:57.923 に答える
0

線に沿ったものはどうですか：

$('#rearw li a, #rearq li a').click(function(ev){
     ev.preventDefault();
     var id = $(this).attr('id');
     $(this).closest('#rearw, #rearq').find('li a').not($(this).toggleClass('selected')).removeClass('selected');
     $(id + '-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
});

変換を間違えたかどうかはわかりませんが、アイデアはそこにあります:)

于 2013-09-06T11:53:49.093 に答える