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 回答