Question

我有一个50项的ul。有没有办法写不必写下面的50个？

$(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

使用starts-with上的^=选择器split和id获取信件： -

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

如果你想保持大写，那么+ letter.toUpperCase() +

Answer 2

你可以像这样在所有这些元素中放置一个公共类：

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

并在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

您可以使用jQuery中内置的each（）和eq（）函数。见例：

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

根据您的情况进行更改，如下所示：

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

在jquery中避免多个加载函数

3 个答案: