Javascript 精简代码

我有一个关于简化jquery代码的问题。我有一个图像列表，每个图像都有一个唯一的id，单击事件显示较大的图像及其信息。有没有一种方法可以使用类似于php的foreach循环的循环来实现这一点

$(function() {
  $('img#cl_1').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
  $('img#cl_2').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
  $('img#cl_3').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
  $('img#cl_4').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
  /*so on and so forth*/
});

---

如果“显示图像”和“显示图像信息”对于每个图像都是不同的值，请考虑将它们加载到一个数组中，或者通过Ajax获取它们。然后将事件绑定更改为如下所示：

$('img.showStuff').click(showDetails);  

function showDetails() {
   var id = this.id;
   $('div#left').html(images[id]).slideDown('fast');
   $('div#right').html(info[id]).slideDown('fast');
}

$(function() {
  $('img[id^="cl_"]').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
});

---

如果您不想使用类选择器，也可以使用如下内容：

$('img.showStuff').click(showDetails);  

function showDetails() {
   var id = this.id;
   $('div#left').html(images[id]).slideDown('fast');
   $('div#right').html(info[id]).slideDown('fast');
}

$(function() {
  $('img[id^="cl_"]').click(function() {
    $('div#left').html('display image').slideDown('fast');
    $('div#right').html('display image info').slideDown('fast');
  });
});

这应该适用于元素id以“cl_”开头的任何图像。 不过，类选择器显然更干净