jquery - 更改类函数

Question

我正在为我的客户端面板制作一个导航栏。它有很多链接。单击链接时，它将更改屏幕主要部分中显示的内容。我需要能够更改 ul(导航栏)中每个 li 条目的类。

这是我的代码，它有效:

$(document).ready(function() {

  function changeActive() {
    $('#elem1, #elem2').removeClass("active");
  }

  $('#main-section').load('src-pages/elem1.html');
  $('#elem1').addClass("active");

  $('li#elem1').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem1.html');
    changeActive();
    $(this).addClass("active");
  });
  $('li#elem2').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem2.html');
    changeActive();
    $(this).addClass("active");
  });
});

我试图使文件大小尽可能小，并希望将 $(this).addClass("active"); 行添加到 changeActive 功能。当我将该行添加到函数中时，它无法正常工作，并且仅将 :hover 和 :focus 样式应用于 li或一个元素。

有人可以解释一下吗:

1. 为什么该行 ($(this).addClass("active");) 在函数中不起作用
2. 如何修复该行以便将其放入函数内

提前谢谢您。

Answer 1

我认为问题是你试图在changeActive函数中执行$(this).addClass()。

如果是这种情况，$(this) 选择器不起作用，因为“this”是在这种情况下触发事件的元素的 jquery 引用。

您需要将“this”传递给其他函数，然后它应该可以工作。尝试:

function changeActive(el) {
    $('#elem1, #elem2').removeClass("active");    
    $(el).addClass('active');//el is the 'this' passed on from your event listener
}

$('li#elem1').click(function() {
    //load file now
    $('#main-section').load('src-pages/elem1.html');
    changeActive(this);
    //$(this).addClass("active");
  });