Javascript 从jquery数组值中选择div

我有一个简单的问题，我需要执行一个操作。单击数组中的某个div

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

但我不知道如何正确地工作

---

谢谢，对不起，我的英语很差。

我只想使用单击元素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');
    });
});

---

我只需要使用单击元素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');
    });
});

---

执行此操作的方法有很多，也可以将值用逗号分隔：

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

或者，您可以在这些div上使用类名，使其更加简单：

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

});

我最喜欢使用类名

---

PS：您不需要if语句。

执行此操作的方法有很多，您也可以将值用逗号分隔：

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

或者，您可以在这些div上使用类名，使其更加简单：

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

});

我最喜欢使用类名

---

PS：您不需要if语句。

您只需要在数组中循环：

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

---

这就是说，必须有更好的方法——类或事件委派——但如果不了解您的用例，就很难说出来。

您只需要在数组中循环：

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

---

---

也就是说，必须有更好的方法-类或事件委派-但如果不了解您的用例，就很难判断。

使用类和DOM导航会更好。html标记是什么样子的？如果向这些元素添加类，您就不必担心为每个id设置检查。您有什么理由这样做吗需要if部分还是我遗漏了什么？使用类和DOM导航会更好。html标记是什么样子的？如果你向这些元素添加类，你就不必担心为每个id设置检查。你需要if部分还是我遗漏了什么？你遗漏了一个原因吗这id@scrappedcola-好眼力！谢谢。可以，但不能将类添加到cat_x->x=clicked container_x这个选项比仅仅通过id抓取元素更重。罗兰-添加什么类@Christophe-如果你认为一个简单的字符串替换比查找数组值更重，你会失望的。在这之后你就错过了一个。id@scrappedcola-好眼力！谢谢。可以，但不能将类添加到cat_x->x=clicked container_x这个选项比仅仅通过id抓取元素更重。罗兰-添加什么类@Christophe-如果您认为一个简单的字符串替换比查找数组值更重，您会失望的。@Xenon-如果您想共享完整的工作代码，最好将其作为单独的答案发布，而不是修改此答案。你仍然可以接受克里斯托夫的回答。只需单击他答案旁边的绿色复选标记。@Leigh我尝试做一个单独的答案，但我无法回答，因为我的代表分数不到10分。@Xenon然后也许可以让我知道我缺少什么？@Xenon-好的，回答你自己的问题一定有限制：/FWIW，你就快到了。。再加一分。@Xenon-如果你想分享你完整的工作代码，最好把它作为一个单独的答案发布，而不是修改这个答案。你仍然可以接受克里斯托夫的回答。只需单击他答案旁边的绿色复选标记。@Leigh我尝试做一个单独的答案，但我无法回答，因为我的代表分数不到10分。@Xenon然后也许可以让我知道我缺少什么？@Xenon-好的，回答你自己的问题一定有限制：/FWIW，你就快到了。。再多一分。