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

Question

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

<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

您可以利用thisjQuery 为加载回调设置的上下文。例如：

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

作为附加提示，最好使用事件委托而不是为每个 li 标签编写 onclick 属性：

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

Answer 2

该.load()事件应该有一个事件处理程序，该事件处理程序将在触发事件时触发，因此您可以在其中设置您的类。

$('#showlist').load('/lists/?List=#ListID#',
    function(){
        //Add class or perform your logic here
        $('#showlist').addClass(x););
    }
);

.Load() | jQuery API

Answer 3

jQuery.load 可以传递一个回调方法，该方法在完成时运行。然后这可以更新父类上的类。

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});