簡化代碼

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

這應該任何圖像上工作具有以'cl_'開頭的元素ID。 一個類選擇器絕對清潔。

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