在jQuery .load事件上交换CSS类

Swapping a CSS class on jQuery .load event

本文关键字：交换 CSS 事件 jQuery load      更新时间：2023-09-26

我有一个列表样式与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>

实际的列表是由一个db查询填充的，但是我已经剥离了它，因为我不相信它与问题相关，只会使事情复杂化!

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

$('#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') 
    }); 
}

.load()事件应该有一个事件处理程序，当事件被触发时会触发，所以你可以在那里设置你的类。

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

.Load() | jQuery API

jQuery。可以向Load传递一个回调方法，该方法在完成时运行。这样就可以更新父类上的类。

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