'這個'和點擊處理程序似乎並不適合我

Question

我有一些麻煩，我的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

Answer 1

你的問題是，你構建的anchor全新的列表，當有人搜索一些東西。

當您刪除舊的分頁時，所有anchor都將消失，並伴隨它們的事件處理程序。您需要事件登錄進入你的constructPagPages功能

移動這樣的：

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

到您的constructPagPages功能，構建分頁之後。

看一看這裏：http://codepen.io/mrducnguyen/pen/xOoLPV