简化代码

Question

我有一个关于简化我的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*/
});

Answer 1

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

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

这适用于任何元素id以'cl_'开头的图像。 类选择器肯定更干净。

Answer 2

如果“显示图像”和“显示图像信息”是每个图像的不同值，请考虑将它们加载到数组中或通过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');
}