我无法更新按钮单击列表并将按钮 class 更改为活动

Question

I want to change the button from normal to active and also update the list, from the JSON data array.我想将按钮从正常更改为活动，并从 JSON 数据数组中更新列表。 But it is not working.但它不起作用。 I tried a bunch of tricks, but it ain't doing anything.我尝试了一堆技巧，但它没有做任何事情。 I also cannot get to update the state of the button from normal to the CSS active property that is defined in the CSS file.我也无法将按钮的 state 从正常更新为 CSS 文件中定义的 CSS 活动属性。

Can you help me out?你能帮我吗？ Thanks.谢谢。

 const list_items=[ "Record 1", "Record 2", "Record 3", "Record 4", "Record 5", "Record 6", "Record 7", "Record 8", "Record 9", "Record 10", "Record 11", "Record 12", "Record 13", "Record 14", "Record 15", "Record 16", "Record 17", "Record 18", "Record 19", "Record 20", "Record 21", "Record 22", "Record 23", "Record 24", "Record 25", ]; const list_element = document.getElementById("list"); const pagination_element = document.getElementById("pagination"); var current_page = 1; var rows = 5; //design the row items function displayListOnScreen(items,wrapper,rows_per_page,page){ wrapper.innerHTML = ""; page--; var start = rows_per_page * page; var end = start + rows_per_page; var paginatedItems = items.slice(start, end); for (var i=0;i<paginatedItems.length;i++){ let item = paginatedItems[i]; let item_element = document.createElement("div"); item_element.classList.add('item'); item_element.innerText = item; wrapper.appendChild(item_element); } } //design the page numbers function paginationPageNumbers(items, wrapper, rows_per_page){ wrapper.innerHTML=""; var page_count = Math.ceil(items.length / rows_per_page); for (var i=1; i<page_count+1; i++){ let btn = PaginationButton(i, items); wrapper.appendChild(btn); } } function PaginationButton(page, items){ let button = document.createElement("button"); button.innerText = page; if(current_page == page) button.classList.add("active"); button.addEventListener("click", function(){ current_page = page; let current_btn = document.querySelector(".pagenumbers button.active"); current_btn.classList.remove("active"); button.classList.add("active"); }) return button; } displayListOnScreen(list_items,list_element,rows,current_page); paginationPageNumbers(list_items, pagination_element, rows);

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Century Gothic"; } body { background-color: #f3f3f3; } header{ display: flex; justify-content: center; align-items: center; height: 60px; background-color: #feee; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } main{ display: flex; flex-direction: column; align-items: center; } main.list{ width: 100%; max-width: 768px; background-color: #fff; border:1px solid #ccc; margin-top: 25px; } main.list.item{ padding:15px; border-bottom: 1px solid #ccc; } main.list.item:last-of-type{ border-bottom: none; } main.list.item:hover{ background: rgba(0,0,0,0.05); }.pagenumbers{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }.pagenumbers button { width: 50px; height: 50px; appearance: none; border:none; border-radius: 10px; outline:none; cursor: pointer; background-color: lightskyblue; margin:5px; transition: 0.2s; color:#fff; font-size: 20px; text-shadow:0px 0px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 0px rgba(0,0,0,0.2); }.pagenumbers button:hover{ background-color: #10e993; }.pagenumbers button:active{ background-color: #07f848; box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Pagination</title> <link rel="stylesheet" href="main.css" /> </head> <body> <header> <h1>UI5 Pagination</h1> </header> <main> <div class="list" id="list"></div> <div class="pagenumbers" id="pagination"></div> </main> <script src="main js"></script> </body> </html>

Answer 1

Your code works, you're just mixing the .active selector ( active class) with the :active pseudo-class (unrelated).您的代码有效，您只是将.active选择器（ active类）与:active伪类（不相关）混合在一起。

Replace .pagenumbers button:active with .pagenumbers button.active to see the highlight effect on the selected page.将.pagenumbers button:active替换为.pagenumbers button.active以查看所选页面上的突出显示效果。

 const list_items=[ "Record 1", "Record 2", "Record 3", "Record 4", "Record 5", "Record 6", "Record 7", "Record 8", "Record 9", "Record 10", "Record 11", "Record 12", "Record 13", "Record 14", "Record 15", "Record 16", "Record 17", "Record 18", "Record 19", "Record 20", "Record 21", "Record 22", "Record 23", "Record 24", "Record 25", ]; const list_element = document.getElementById("list"); const pagination_element = document.getElementById("pagination"); var current_page = 1; var rows = 5; //design the row items function displayListOnScreen(items,wrapper,rows_per_page,page){ wrapper.innerHTML = ""; page--; var start = rows_per_page * page; var end = start + rows_per_page; var paginatedItems = items.slice(start, end); for (var i=0;i<paginatedItems.length;i++){ let item = paginatedItems[i]; let item_element = document.createElement("div"); item_element.classList.add('item'); item_element.innerText = item; wrapper.appendChild(item_element); } } //design the page numbers function paginationPageNumbers(items, wrapper, rows_per_page){ wrapper.innerHTML=""; var page_count = Math.ceil(items.length / rows_per_page); for (var i=1; i<page_count+1; i++){ let btn = PaginationButton(i, items); wrapper.appendChild(btn); } } function PaginationButton(page, items){ let button = document.createElement("button"); button.innerText = page; if(current_page == page) button.classList.add("active"); button.addEventListener("click", function(){ current_page = page; let current_btn = document.querySelector(".pagenumbers button.active"); current_btn.classList.remove("active"); button.classList.add("active"); }) return button; } displayListOnScreen(list_items,list_element,rows,current_page); paginationPageNumbers(list_items, pagination_element, rows);

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Century Gothic"; } body { background-color: #f3f3f3; } header{ display: flex; justify-content: center; align-items: center; height: 60px; background-color: #feee; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } main{ display: flex; flex-direction: column; align-items: center; } main.list{ width: 100%; max-width: 768px; background-color: #fff; border:1px solid #ccc; margin-top: 25px; } main.list.item{ padding:15px; border-bottom: 1px solid #ccc; } main.list.item:last-of-type{ border-bottom: none; } main.list.item:hover{ background: rgba(0,0,0,0.05); }.pagenumbers{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }.pagenumbers button { width: 50px; height: 50px; appearance: none; border:none; border-radius: 10px; outline:none; cursor: pointer; background-color: lightskyblue; margin:5px; transition: 0.2s; color:#fff; font-size: 20px; text-shadow:0px 0px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 0px rgba(0,0,0,0.2); }.pagenumbers button:hover{ background-color: #10e993; }.pagenumbers button.active { background-color: #07f848; box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Pagination</title> <link rel="stylesheet" href="main.css" /> </head> <body> <header> <h1>UI5 Pagination</h1> </header> <main> <div class="list" id="list"></div> <div class="pagenumbers" id="pagination"></div> </main> <script src="main js"></script> </body> </html>

我无法更新按钮单击列表并将按钮 class 更改为活动

问题描述

1 个解决方案

解决方案1
0 2022-07-25 22:09:49

我无法更新按钮单击列表并将按钮 class 更改为活动

问题描述

1 个解决方案

解决方案1 0 2022-07-25 22:09:49

解决方案1
0 2022-07-25 22:09:49