javascript - 在 jQuery .load 事件上交换 CSS 类

Question

我有一个用 CSS 样式化的列表 - 标准的东西。该功能中的项目 jQuery .load 将相关信息加载到另一个 div 中。这工作正常，但是我还需要更改列表中的类以反射(reflect)已加载的项目。下面是我现有的代码，这可能会更好地解释它......

<ul class="inner-nav" id="tdlists">
  <li class="active"><a onclick="$('##showlist').load('/lists/?List=#ListID#');">#ListName#</a></li>
  <li><a onclick="$('##showlist').load('/lists/?List=#ListID#');">#ListName#</a></li>
  <li><a onclick="$('##showlist').load('/lists/?List=#ListID#');">#ListName</a></li>
</ul>

实际列表由数据库查询填充，但我已将其删除，因为我认为它与问题无关，只会使事情复杂化!

Answer 1

您可以利用 jQuery 为加载回调设置的 this 上下文。例如:

$('#showlist').load('/lists/?List=#ListID#', function(){ 
    $(this).addClass('loaded') 
});

作为额外的提示，如果您使用事件委托(delegate)而不是为每个 li 标签编写 onclick 属性会更好:

$('#tdlists').on('click', 'li a', function () {
    $('#showlist').load('/lists/?List=#ListID#', function(){ 
           $(this).addClass('loaded') 
    }); 
}