簡要背景：我正在嘗試創建一個聊天應用程式，首先我只想加載 N 條訊息（比如 20 條），當用戶向上滾動并到達頂部時，將通過 AJAX 獲取更多 20 條訊息并將其添加到現有的訊息。當然，這些訊息是較舊的訊息。我到處搜索邏輯以創建無限滾動以從表中反向獲取行并在前面添加行，但在任何地方我都得到無限滾動來獲取并附加我在這種情況下不想要的下一行。因此，我決定嘗試創建一個邏輯或想出一種方法，讓我可以自己進行這種反向無限滾動。因此，我嘗試做下面的事情。
我嘗試了什么：當獲取前 20 條訊息并說它們id在 81-100 范圍內時，我捕獲較低的 id 81 并將其放置data-id在聊天框的父容器的屬性中。現在，當scroll呼叫事件時，我將這個id81 發送到后端并運行查詢WHERE (id < 81 AND id >= 81-20) ORDER BY id ASC并根據需要回傳前面的 20 行。在successAJAX 呼叫的函式中，我將新的下部更新id為聊天框的父元素。以前是 81，現在是 61。
問題：對于第一個滾動，我可以正確檢測到 81，但是一旦值更改，滾動元素就不會檢測到更新值 61。它仍然回傳 81。
期望：如何讓滾動事件data-id在用戶滾動到頂部時檢測到更新的值？
代碼
var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").data('id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to=' to '&lastid=' lastid,
dataType: 'JSON',
success: function(data){
chatBox.attr('data-id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});
HTML
<div class="retrive-chat" data-id="81"></div>
此data-id值最初是從另一個 AJAX 呼叫分配的，然后在觸發滾動事件時更新，但在再次觸發滾動事件時未檢測到更新的值。它繼續使用 81。
uj5u.com熱心網友回復：
這是我有時也遇到過的問題，解決方案非常簡單：保持一致。
如果您使用 修改了屬性，.data()但隨后又想使用 讀取值，就會發生這種情況.attr()。使用其中任何一個，但不要混合使用：
var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").attr('data-id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to=' to '&lastid=' lastid,
dataType: 'JSON',
success: function(data){
chatBox.attr('data-id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});
或者：
var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").data('id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to=' to '&lastid=' lastid,
dataType: 'JSON',
success: function(data){
chatBox.data('id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});
如果您在檢查器中檢查 html，您會注意到這一點：隨.data()更改而更改的內容將不可見。使用.attr()和 值將明顯改變。
uj5u.com熱心網友回復：
不要使用.attr()更新 id 值，使用.data()：
chatBox.data("id", data.mid);
正如 jQuery.data()機制所記錄的那樣，所涉及的屬性值被讀取一次。此后，這些值通過 jQuery 代碼保存在內部資料結構中，并且 DOM 屬性值沒有改變。
請注意，當您最初獲取“id”值時，您只使用“id”來設定它，而不是“data-id”。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533735.html