Сжатие jquery с номерами функций

Question

Я уверен, что на это, возможно, уже был дан ответ, но я не совсем уверен, что я спрашиваю, если вы можете указать мне в правильном направлении, которое было бы очень оценено.

ИТАК у меня есть функция, которая все, но номер документа является тем же самым до 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'); 
});