Question

我的jQuery代码遇到了一些麻烦。我正在构建一个分页的解决方案，我有一个'paginate'函数（第87行），我想在任何需要操作的数组上使用它。

这是具有两个参数的paginate函数。这是“选定的”参数，似乎搞砸了，因为当我在下一个代码示例（按钮点击功能）中调用它时，$（this）关键字指的是按钮。不是预期的选定锚。

function paginate(list, selected) {
// Removes all the items from the document. But because we are storing
// the items in an array, nothing is really lost.
removeStudents();

// Declaring the array that is to be filled with the students needed
// based on which pagination anchor element is clicked.
var arrToShow = [];

// Variable that decides where the counting of the students should start
// based on which pagination anchor element has the class of 'active'.
var headIndex = selected * maxStudents;

// Variable that goes together with the headIndex.
var tailIndex = headIndex - 10;

// Pushes the students, that have been chosen by the parameters of the function,
// to the arrToShow array.
for ( var i = tailIndex; i < headIndex; i++ ) {
    arrToShow.push(list[i]);
}
// Displays all of the objects within the arrToShow array.
for ( i = 0; i < arrToShow.length; i++ ) {
    $(".student-list").append(arrToShow[i]);
}

我在函数中有两个参数：列表本身以及当前处于活动状态或单击的分页锚元素。问题似乎是当我在另一个函数内部实现分页功能时，$（this）引用了按钮（第57行）（我指的是第57行的按钮点击功能）。

这是按钮功能。它现在才有效，因为我为第二个参数设置了'1'。我希望它像一个全局变量，指定所选的锚参数。

function buttonClicked() {
    removeStudents();
    // Store what's typed in to the search input in a variable.
    var userSearch = $("input").val();

    // Creating an array for the successfully searched array objects.
    var userSearchArr = [];

    // Iterating through every single student, looking for a match, if a match
    // is found, push it to the userSearchArr, then appending the objects
    // within that array to the student list container.
    $.each(allStudentsArr, function() {
        var studentName = $(this).find("h3").text();
        var filterThrough = studentName.indexOf(userSearch);
        console.log(filterThrough);

        if (filterThrough !== -1) {
            userSearchArr.push($(this));
        }

    });

    constructPagPages(userSearchArr.length);
    paginate(userSearchArr, 1);
    }

是否有某种方法可以在点击处理程序全局中创建$（this）关键字，以便它引用单击处理程序$（this）而不是属于我所在的函数的$（this） m调用paginate函数？

这是paginationClicked函数。罪魁祸首。它可以很好地调用其中的分页函数，因为$（this）关键字引用了锚元素。但是，当我在buttonClicked函数中调用分页函数时，它不会。

function paginationClicked() {
    // Removes all the sibling anchor elements classes.
    $(this).parent().parent().children().children().removeClass("active");
    // Adds the class active to the selected anchor.
    currentPagPage = $(this).text();
    console.log(currentPagPage);
    paginate(allStudentsArr, $(this).text());

}

这是事件处理程序：

// Event click handler that targets the pagination buttons.
$(".pagination a").click(paginationClicked);

$("button").click(buttonClicked);

如果有什么不清楚的地方，请随时询问。我已经在这几个小时了，我似乎无法找到解决方案。

非常感谢一些指导方针。欢呼声。

这是我的代码： https://github.com/SebastianPeterAndersson/Pagination-And-Content-Filter/blob/master/js/pagination-content-filter.js

Answer 1

您的问题是，当有人搜索某些内容时，您会构建全新的anchor列表。

删除旧分页后，所有anchor以及事件处理程序都将消失。您需要将事件注册移至constructPagPages函数

移动这个：

// Event click handler that targets the pagination buttons.
$(".pagination a").click(paginationClicked);

在构建分页后，

进入constructPagPages函数。

看看这里：http://codepen.io/mrducnguyen/pen/xOoLPV

'this'和点击处理程序对我来说似乎并不顺利

1 个答案: