1

簡単な問題があります。配列内のdivをクリックした場合は、アクション.click（）を実行する必要があります。

if($('#container_1').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_1').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_2').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_2').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_3').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_3').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_4').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_4').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

if($('#container_5').click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_5').css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

さて、それが私のコードです...

しかし、私はもっと短くすることができると思います...このようなコードで::

Contenedores = ['1', '2', '3', '4', '5'];

if($('#container_'+Contenedores).click(function(){ 
    $('div#image').fadeOut('fast', function(){
        $('div#cat_'+Contenedores).css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
}));

しかし、私はそれがどのように正しく機能するのかわかりません...

ありがとう、そして私の貧弱な英語をごめんなさい。

4

3 に答える 3

4

「猫」要素を取得するには、クリックされた要素の ID の番号を使用するだけです。まったく同じことをして、クリックするたびに同じコンテンツをロードする理由は私にはわかりませんが、次のようなものです。

$('[id^="container_"]').on('click', function(){ 
    var self=this;
    $('div#image').fadeOut('fast', function(){
        $('div#cat_'+self.id.replace('container_','')).css('background-color', '#F30');
        $('#new_frame').show('fast').load('history.html');
    });
});
于 2012-12-17T19:54:06.663 に答える
2

このアクションを実行するには多くの方法があります。値をコンマで区切ることもできます。

$('#container_1,#container_2,#container_3,#container_4,...').click(function(){ ...

または、これらの div でクラス名を使用して、より簡単にすることもできます。

$('.toclick').click(function(){

});

クラス名を使用するのが私のお気に入りです。

PS: if ステートメントは必要ありません。

于 2012-12-17T19:56:32.587 に答える
0

配列をループするだけです。

var Contenedores = ['1', '2', '3', '4', '5'];

$.each(Contenedores,function(index,value){
$('#container_'+value).click(function(){ 
$('div#image').fadeOut('fast', function(){
    $('div#cat_'+value).css('background-color', '#F30');
    $('#new_frame').show('fast').load('history.html');
});
});
});

とはいえ、クラスまたはイベント委任のいずれかにより良い方法があるに違いありませんが、ユース ケースを理解しないと判断するのは困難です。

于 2012-12-17T20:09:26.883 に答える