我正在尝试添加 'active'
类到 <li>
当<li>
被点击。 <li><a>
的结构是这样的看起来像:
<li onclick="paginationChange(2)" id="2" class="page-item">
<a class="page-link" href="#">2</a>
</li>
作为每个 <li>
有一个 id 附加到它我认为它会像这样简单:
$('#' + page).addClass('active');
在哪里page
是传递给 onclick
的数字方法。然而,使这变得复杂的是我正在使用 PartialView
在 ajax
成功时加载称呼。所以整个 onclick
方法如下所示:
function paginationChange(page) {
$.ajax({
type: 'GET',
url: '/Projects/ProjectTable/CountProjects',
data: { searchString: $('#searchBox').val() },
success: function(result) {
$('#table-container').load('/Projects/ProjectTable/TestPartialView',
{
searchString: $('#searchBox').val(),
currentPage: page,
projectCount: result
});
$('#' + page).addClass('active');
}
});
}
我试过在 addClass
周围移动打电话,因为我认为问题可能是 PartialView
在我添加类后呈现,因此呈现没有类的元素。
有没有办法让我等到 TestPartialView
已完整加载,然后将类添加到正确的 <li>
?
编辑:
<ul id="paginationList" class="pagination">
<li id="1" class="page-item">
<a class="page-link" href="#">1</a>
</li>
</ul>
新js:
$('#paginationList li.page-item').click(function () {
console.log('test');
var $li = $(this);
$.ajax({
type: 'GET',
url: '/Projects/ProjectTable/CountProjects',
data: { searchString: $('#searchBox').val() },
success: function(result) {
$('#table-container').load('/Projects/ProjectTable/TestPartialView',
{
searchString: $('#searchBox').val(),
currentPage: page,
projectCount: result
}, function() {
$li.addClass('active');
});
}
});
});
最佳答案
Is there a way I can wait until the TestPartialView has loaded in its entirety and then add the class to the correct
<li>
?
是的,你可以把addClass()
调用 load()
的回调打电话。
另请注意,使用 on*
事件处理程序非常过时。当您使用 jQuery 时,您可以使用它向 li
添加不显眼的事件处理程序。这样就无需传递硬编码参数,因为您已经有了对引发事件的元素的引用。试试这个:
<ul>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
</ul>
$(function() {
$('li.page-item').click(function() {
var $li = $(this);
$.ajax({
type: 'GET',
url: '/Projects/ProjectTable/CountProjects',
data: {
searchString: $('#searchBox').val()
},
success: function(result) {
$('#table-container').load('/Projects/ProjectTable/TestPartialView', {
searchString: $('#searchBox').val(),
currentPage: page,
projectCount: result
}, function() {
// this argument is a function to be executed once the content has been loaded,
// similar to the success handler of $.ajax
$li.addClass('active');
});
}
});
});
});
关于javascript - 在成功调用 ajax 后使用 jQuery 将类添加到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50758640/