javascript - 从 jquery 数组值中选择 div

Question

我有一个简单的问题，如果在我的数组中的一个 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');
    });
}));

但是我不知道怎么才能正常工作...

谢谢，抱歉我的英语不好。

Answer 1

我只是使用被点击元素的 ID 中的数字来获取“cat”元素。为什么你会做完全相同的事情并在每次点击时加载相同的内容超出了我的理解，但是像这样的事情:

$('[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');
    });
});