4

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*/
});
4

2 に答える 2

3

クラスセレクターを使用したくない場合は、次のようなものを使用することもできます。

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

これは、「cl_」で始まる要素IDを持つすべての画像で機能するはずです。ただし、クラスセレクターは間違いなくクリーンです。

于 2012-12-18T22:20:33.647 に答える
2

「displayimage」と「displayimageinfo」が画像ごとに異なる値である場合は、それらを配列にロードするか、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');
}
于 2012-12-18T22:19:34.343 に答える