冷凝jquery編號的功能

Question

我確定這可能已經被回答了，但我不太清楚我在問什麼，如果你能指出我會在正確的方向，這將是多少a​​preciated。

OK，所以我有一個函數，它所有，但身份證號碼是一樣的多達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_"] s ays has an attribute that starts with "project_"。

雖然你會推遲作出一類，然後使用數據屬性來存儲要好一些：

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