'这个'和点击处理程序似乎并不适合我

我有一些麻烦，我的jQuery代码。我正在构建一个分页解决方案，我有一个'paginate'函数（第87行），我想在任何需要操作的数组上使用它。'这个'和点击处理程序似乎并不适合我

这是具有两个参数的分页函数。这是“选择”的参数，似乎弄乱了事情，因为当我在下一个代码示例（按钮单击函数）中调用它时，$（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]); 
}

我在函数两个参数：列表本身和分页锚元素当前活动，或点击。这个问题似乎是，当我在另一个函数内部实现了分页函数时（我指的是第57行的按钮点击函数），$（this）引用了按钮（第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); 
    }

有使$（本）单击处理全球范围内的关键字的一些方法，以便它是指点击处理$（本），而不是属于该$（本）函数我在调用分页函数？

这是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

来源

2016-08-25 S. Andersson

请[编辑]你的问题直接在问题正文显示相关的代码。 – nnnnnn

'$（this）！= this'。 * this *是引用由调用设置的对象的关键字（或者在严格模式下可能未定义），'$（this）'是一个jQuery对象。 – RobG

那么'this'这个关键字会起作用吗？对不起，我不是那种经历，因此需要更多的特异性。 –

你的问题是，你构建的anchor全新的列表，当有人搜索一些东西。

当您删除旧的分页时，所有anchor都将消失，并伴随它们的事件处理程序。您需要事件登录进入你的constructPagPages功能

移动这样的：

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

到您的constructPagPages功能，构建分页之后。

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

来源

2016-08-25 05:21:12

非常感谢你的帮助！完全合作。 –

'这个'和点击处理程序似乎并不适合我

回答

相关问题