0

我被困在这个挑战上，所以我需要帮助。

一个网站需要一个列表，用户可以在其中对他们最喜欢的食物进行排名。编写 setup 函数，它应该在所有 Up 上注册点击处理程序！和下来！纽扣。向上！按钮应将列表项在列表中向上移动一位，而向下！按钮应将列表项在列表中向下移动一位。

例如，考虑以下代码：

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`;

setup();

如果按钮向上！单击 Pizza 列表项中的按钮，Pizza 应该是列表中的第一项，而 Taco 应该是第二项。

这是我当前的代码：

function setup() {
  let list = document.getElementByTagName('li');
  let btnList = document.getElementByTagName('button');
  let up;
  let down;
  
  for (let l = 0; l < list.length; l++){
    for (let b = 0; b< btnList.length; b++){
      btnList[b].addEventListener("click", (item, index)=>{
        if(btnList[b].textContent == "Up!"){
          up = list[l - 1]
        } else if(btnList[b].textContent == "Down!"){
          down = list[l + 1]
        } else{
          return list
        }
      })
    }
  }
    return list;  
      
    })
  }
}

我需要在没有 jQuery 的情况下解决它。

4

2 回答 2

0

您不需要两个 for 循环来遍历列表元素和按钮。您只需要按钮，li元素就是它们parentNode的 s。

向上

将事件侦听器添加到每个按钮后，您可以通过检查它们的textContent. 如果它是“向上”按钮，则需要检查它是否是列表中的第一个元素。如果是的话，不要做任何事情，你不能把它移到更高的地方。:)

如果它不是第一个元素，则可以使用insertBefore交换节点。它的第一个参数是要插入的节点，在本例中是parent元素；li. 第二个参数是引用；插入的节点li。那是previousElementSibling的parent。

向下移动

向下移动元素非常相似。您可能认为您将使用insertAfter交换，但没有insertAfter方法。您可以insertBefore再次使用，但这次您插入的节点将是nextElementSibling并且引用是parent.

看看下面的片段：

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`

function setup() {
  let btnList = document.querySelectorAll('button')

  for (let button of btnList) {
    button.addEventListener('click', handleClick)
  }
}

function handleClick(e) {
  let parent = e.target.parentElement
  let isUp = e.target.textContent === 'Up!'
  let isDown = e.target.textContent === 'Down!'
  let isFirst = !parent.previousElementSibling
  let isLast = !parent.nextElementSibling

  if (isUp && !isFirst)
    parent.parentNode.insertBefore(parent, parent.previousElementSibling)

  if (isDown && !isLast)
    parent.parentNode.insertBefore(parent.nextElementSibling, parent)
}

setup()
button {
  background-color: hsl(206, 100%, 52%);
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  margin: 2px 4px;
  padding: 4px 8px;
}

button:hover {
  background-color: hsl(206, 100%, 40%);
}

您也可以只在元素上添加一个事件侦听ol器并检查点击目标是否为button. 你可以用event.target.tagName这个。如果tagName是BUTTON（在 HTML 中总是大写），您只需返回以提前退出：

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`

function setup() {
  document.querySelector('ol').addEventListener('click', e => {
    if (e.target.tagName !== 'BUTTON')
      return

    let parent = e.target.parentElement
    let isUp = e.target.textContent === 'Up!'
    let isDown = e.target.textContent === 'Down!'
    let isFirst = !parent.previousElementSibling
    let isLast = !parent.nextElementSibling

    if (isUp && !isFirst)
      parent.parentNode.insertBefore(parent, parent.previousElementSibling)

    if (isDown && !isLast)
      parent.parentNode.insertBefore(parent.nextElementSibling, parent)
  })
}

setup()
button {
  background-color: hsl(206, 100%, 52%);
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  margin: 2px 4px;
  padding: 4px 8px;
}

button:hover {
  background-color: hsl(206, 100%, 40%);
}

于 2022-01-19T21:27:47.480 回答
-2 

//Following code will give you 100% perfect score.
   

function setup() {
  let buttons = document.querySelectorAll('button');
// console.log(buttons);
  buttons.forEach(function(btn){
// console.log(btn);
    btn.addEventListener("click", function(){
// console.log(btn.textContent);
      if(btn.textContent.includes('Up!')){ 
//      console.log(btn.parentElement.previousElementSibling);
//      console.log(btn.parentElement.nextElementSibling);
if(btn.parentElement.previousElementSibling != null){
var store = btn.parentElement.previousElementSibling.innerHTML;
btn.parentElement.previousElementSibling.innerHTML= btn.parentElement.innerHTML;
btn.parentElement.innerHTML= store;
setup();
}else{ console.log("Hello Developer, this element is at start");}
}else{ 
// taking down.
if(btn.parentElement.nextElementSibling != null){
    var stored = btn.parentElement.nextElementSibling.innerHTML;
    btn.parentElement.nextElementSibling.innerHTML = btn.parentElement.innerHTML;
btn.parentElement.innerHTML = stored;
setup(); 
} else {
console.log("Hi developer, element already at last");
}
}
    });
  });
}

// Example case
document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`;

setup();
document.getElementsByTagName('button')[2].click();
console.log(document.body.innerHTML);

于 2022-01-28T19:25:47.820 回答