如何動態顯示/隱藏導航按鈕？

Question

當一個項目在列表的頂部時，我需要刪除“上”按鈕；當一個項目在列表的底部時，我需要刪除“下”按鈕。

我嘗試執行一些代碼，但是當我刪除按鈕時，它們不再永久存在，只有在項目位於頂部或底部時才需要這樣做

我正在嘗試解決此問題，但我不知道如何解決，有人可以幫助我嗎？ 我是JavaScript語言的新手。

 function attachButtons(list){ let upButton = document.createElement('button'); upButton.className = 'up'; upButton.textContent = 'Up' list.appendChild(upButton); let downButton = document.createElement('button'); downButton.className = 'down'; downButton.textContent ='Down'; list.appendChild(downButton); let removeButton = document.createElement('button'); removeButton.className = 'remove'; removeButton.textContent = 'Remove'; list.appendChild(removeButton); }; const ul = document.getElementsByTagName('ul')[0]; const existingLi = ul.children; for(let i = 0; i < existingLi.length; i++){ attachButtons(existingLi[i]); } const input = document.getElementsByTagName('input')[0]; const addButton = document.getElementsByClassName('add')[0]; addButton.addEventListener('click', () => { let liItem = document.createElement('li'); let pItem = document.createElement('p'); pItem.textContent = input.value; liItem.appendChild(pItem); attachButtons(liItem); ul.appendChild(liItem); input.value = ''; }); ul.addEventListener('click', (event) => { let liItem = event.target.parentNode; if(event.target.className == 'remove'){ ul.removeChild(liItem); } if(event.target.className == 'up'){ let prevLi = liItem.previousElementSibling; if(prevLi){ ul.insertBefore(liItem, prevLi); } } if(event.target.className == 'down'){ let nextLi = liItem.nextElementSibling; if(nextLi){ ul.insertBefore(nextLi, liItem); } } }); const liFirstChild = ul.firstElementChild; const firstChildButton = liFirstChild.querySelector('.up'); //liFirstChild.removeChild(firstChildButton); const liLastChild = ul.lastElementChild; const lastChildButton = liLastChild.querySelector('.down'); //liLastChild.removeChild(lastChildButton);

 body { background: #f1f1f1; font-family: arial, sans-serif; } .container { width: 600px; height: auto; margin: 0 auto 5px; padding: 40px 20px; border-radius: 5px; background: white; text-align: center; } h1 { font-size: 24px; color: #000; margin: 0 0 10px; padding: 0; } p { font-size: 12px; color: #666; margin: 0 0 20px; padding: 0; } input { min-width: 180px; height: 30px; border: 1px solid #999; border-radius: 3px 0 0 3px; margin: 0; padding: 0 10px; } .add { height: 32px; background: #f1f1f1 ; border: 1px solid #999; border-radius: 0 3px 3px 0; color: #333; margin: 0 0 0 -5px; padding: 0 10px; } ul { list-style: none; text-align: left; margin: 40px 0 0; font-size: 14px; color: #666; } li { height: auto; border-bottom: 1px solid #ccc; margin: 10px 0 0; padding: 5px 0; } li:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } li p { margin: 10px 30px 0 0; padding: 0; background: white; float: left; } .up, .down { background: white; border: 1px solid #999; border-radius: 2px; color: #999; margin: 0; padding: 5px 10px; } .remove { background: white; border: 1px solid red; border-radius: 2px; color: red; margin: 0; padding: 5px 10px; }

 <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> <title>Traversing</title> </head> <body> <div class="container"> <h1>List of Cars</h1> <p>A list of cars I love</p> <div> <input type="text"> <button class="add">Add Car</button> </div> <ul> <li> <p>BMW M5</p> </li> <li> <p>Porche 911 Turbo</p> </li> <li> <p>Mercedez A250 AMG</p> </li> </ul> </div> <script src="app.js"></script> </body> </html>

Answer 1

您可以只使用CSS來做：

   /*2nd element (up) in first li is not displayed */
    ul li:first-child > :nth-child(2) {
      display:none;
    }
   /*3rd element (down) in last li is not displayed */
    ul li:last-child > :nth-child(3) {
       display:none;
    }

代碼筆示例

如何動態顯示/隱藏導航按鈕？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-01-17 19:24:15

如何動態顯示/隱藏導航按鈕？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-01-17 19:24:15

解決方案1
0 已采納 2017-01-17 19:24:15