gpt4 book ai didi

javascript - “this”和点击处理程序对我来说似乎不太协调

转载 作者:行者123 更新时间:2023-12-03 06:15:16 25 4
gpt4 key购买 nike

我的 jQuery 代码遇到一些问题。我正在构建一个分页解决方案,我有一个“分页”函数(第 87 行),我想在需要操作的任何数组上使用它。

这是有两个参数的分页函数。 “selected”参数似乎把事情搞砸了,因为当我在下一个代码示例(按钮单击函数)中调用它时,$(this) 关键字指的是按钮。不是按预期选择的 anchor 。

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]);
}

该函数中有两个参数:列表本身以及当前处于事件状态或单击的分页 anchor 元素。问题似乎是当我在另一个函数内部实现分页函数时(我指的是第 57 行的按钮单击函数),$(this) 引用了按钮(第 57 行)。

这是按钮功能。它现在才有效,因为我为第二个参数设置了“1”。我希望它像一个全局变量一样,指定选择哪个 anchor 参数。

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)我正在调用分页函数吗?

这是 paginationClicked 函数。罪魁祸首。由于 $(this) 关键字引用 anchor 元素,因此在其中调用分页函数效果很好。但是,当我在 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

最佳答案

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

当您删除旧的分页时,所有 anchor 及其事件处理程序都会消失。您需要将事件注册移至 constructPagPages 函数

移动这个:

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

构建分页后,进入您的 constructPagPages 函数。

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

关于javascript - “this”和点击处理程序对我来说似乎不太协调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39136065/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com