食品排行榜挑战赛（TestDome）答案

【问题标题】：Food Ranking List Challenge (TestDome)食品排行榜挑战赛（TestDome）
【发布时间】：2022-02-12 21:33:11
【问题描述】：

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

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

例如，考虑以下代码：

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 的情况下解决它。

【问题讨论】：

嘿@munteanu dan，几周前我试图帮助你回答下面的问题。你有机会去看看吗？有意义吗？如果回答有用，请点击其左侧的点赞按钮（▲）。如果它回答了您的问题，请单击复选标记 (✓) 接受它。这样别人就知道它有效。 stackoverflow.com/help/someone-answers

标签： javascript html dom dom-events codewarrior

【解决方案1】：

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

向上移动

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

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

向下移动

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

查看下面的 sn-p：

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%);
}

【讨论】：

【解决方案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);

【讨论】：