Vermeiden mehrerer Ladefunktionen in Jquery

Question

Ich habe eine 50-Artikel ul. Gibt es eine Möglichkeit zu schreiben, um nicht 50 der folgenden zu schreiben?

$(function(){ 
$("#nav_a").on("click", function(){ 
    $("#main_text").load("pageA.html #main_text"); 
}); 
$("#nav_b").on("click", function(){ 
    $("#main_text").load("pageB.html #main_text"); 
});  
$("#nav_c").on("click", function(){ 
    $("#main_text").load("pageC.html #main_text"); 
}); 

Answer 1

Verwenden Sie den starts-with Wähler ^= und split auf der id zu Erhalten Sie den Brief: -

$(function() { 
    $('[id^="nav_"]').on("click", function() { 
    var letter = this.id.split('_')[1]; 
    $("#main_text").load("page" + letter + ".html #main_text"); 
    }); 
}); 

, wenn Sie die Großbuchstaben halten wollen, dann + letter.toUpperCase() +

Answer 2

Sie können eine gemeinsame Klasse quer durch alle diese Elemente so:

<ul class="myElem" data-page="n">... 

und in jQuery:

$(document).on('click', '.myElem', function() { 
    var page = $(this).attr('data-page'); //Get the page 
    $('#main_text').load('page' + page + '.html #main_text'); 
}); 

Answer 3

Sie können die each() und eq() Funktion in jQuery gebaut verwenden. Siehe Beispiel:

Html:

<ul> 
    <li>0</li> 
</ul> 

<ul> 
    <li>1</li> 
</ul> 

Javascript:

var color = ['red', 'blue']; 

$("ul").each(function(i) { 
    $("ul:eq(" + i + ")").css("color", color[i]); 
}); 

Und es wie unten für Ihre Situation ändern:

var page = ['pageA.html', 'pageB.html', 'pageC.html']; 

$("#nav ul").each(function(i) { 
    $("ul:eq(" + i + ")").on("click", function() { 
     $("#main_text").load(page[i] + " #main_text"); 
    }); 
});