Функция конденсации jQuery

Question

Итак, у меня есть следующий jQuery (Ajax).

jQuery("button1").click(function(){ 
    jQuery("#div1").load("demo_test.txt"); 
}); 
jQuery("button2").click(function(){ 
    jQuery("#div2").load("demo_test.txt"); 
}); 
jQuery("button3").click(function(){ 
    jQuery("#div3").load("demo_test.txt"); 
}); 
jQuery("button4").click(function(){ 
    jQuery("#div4").load("demo_test.txt"); 
}); 
jQuery("button5").click(function(){ 
    jQuery("#div5").load("demo_test.txt"); 
}); 

Как вы можете видеть, у меня есть 5 кнопок и 5 разделов.

Есть ли способ минимизировать функции jQuery?

С благодарностью

Answer 1

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

Существует много способов достичь этого. Можно было бы использовать for, но обычно это не хорошая практика, как для этих случаев.

Вы можете otherway сделать кнопки принадлежат к одному классу, а затем выберите Див согласно предшествующему элементу (например parent) из $(this). Вы не разместили свой html код, поэтому я буду считать ваш . Divсодержит вашу кнопку.

JS

jQuery(".mybtnclass").click(function(){ 
    var mydiv = $(this).parent('div'); 
    jQuery(mydiv).load("demo_test.txt"); 
}); 

HTML

<div> 
    <button class="mybtnclass" value="click me1" /> 
</div> 

<div> 
    <button class="mybtnclass" value="click me2" /> 
</div> 

Это цель контейнера DIV и переписать его содержимое, удаляя таким образом кнопку щелкают.

---

Другим (sintactically более сложный) подход к целевому DIV по ID Элемента, используя в data HTML атрибутов, и ДИВА может мне в любом месте вашего документа, не обязательно содержащий кнопку.

JS

jQuery(".mybtnclass").click(function(){ 
    var mydiv = $(this).data('banner'); 
    jQuery('#'+mydiv).load("demo_test.txt"); 
}); 

HTML

<button class="mybtnclass" value="click me1" data-banner="banner1" /> 
<div id="banner1"></div> 

<button class="mybtnclass" value="click me2" data-banner="justanothername" /> 
<div id="justanothername"></div> 

Answer 2

?? да есть

for (var i=1;i<6;i++) { 
    jQuery("button"+i).click(function(){ 
    jQuery("#div"+i).load("demo_test.txt"); 
    }); 
} 

но это, вероятно, не то, что вы ищете. Пожалуйста, уточните вопрос.

Answer 3

Вы можете использовать the 'Attribute Starts With' selector, который проверяет имена, начинающиеся с «кнопка».

Существует список всех селекторов jQuery here.

Нечто подобное могло бы сделать то, что вы просите. Вероятно, это более элегантный способ сделать это.

jQuery("button[name^='button']").click(function(){ 
    var lastChar = this.name.substr(this.name.length - 1); 
    $("#div"+lastChar).text("Clicked"); 
});