javascript - Streamlining code

Question

I have a question about streamlining my jquery code. I have a list of images and each has a unique id and the click event displays the larger image and its info. Is there a way to do this with a loop similar to php's foreach loop?

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