压缩jquery编号函数

Question

我相信这个问题可能已经有人回答了，但我不太确定我在问什么，所以如果你能给我指出正确的方向，我将不胜感激。

好的，我有一个函数，除了id号以外所有的都是相同的直到30

有没有办法让我在不重复30次的情况下做到这一点

在下面的示例

$('ul#grid li#project_001 a').click(function(){ 
$('.colOne').html(ajax_load).load('ajax/project_001.html');
}); 
$('ul#grid li#project_002 a').click(function(){ 
$('.colOne').html(ajax_load).load('ajax/project_002.html');
});
$('ul#grid li#project_003 a').click(function(){ 
$('.colOne').html(ajax_load).load('ajax/project_003.html');
}); 
$('ul#grid li#project_004 a').click(function(){ 
$('.colOne').html(ajax_load).load('ajax/project_004.html');
});

谢谢大家的帮助

Answer 1

可以这样做:

$('#grid li[id^="project_"] a').click(function() {
    var id = $(this).closest('li').attr('id');
    $('.colOne').html(ajax_load).load('ajax/' + id + '.html');
});

虽然我会使用类并将data-属性添加到那些<li>元素:

<li class="project" data-filename="ajax/project_004.html">

并使用.data()函数:

$('#grid li.project a').click(function() {
    var filename = $(this).closest('li').data('filename');
    $('.colOne').html(ajax_load).load(filename);
});

Answer 2

你想在属性上做一个匹配:

$('ul#grid li[id^="project_"] a').click(function(){
    var id = $(this).closest('li').attr('id');
    $('.colOne').html(ajax_load).load('ajax/'+id+'.html');
});

[id^="project_"]表示has an attribute that starts with "project_"。

尽管您最好创建一个类，然后使用data属性来存储数字:

<li class="project" data-projnum="004">...

JS:

$('ul#grid li.project a').click(function(){ 
    var projnum = $(this).closest('li').data('projnum');
    $('.colOne').html(ajax_load).load('ajax/project_' + projnum + '.html');
});