需要帮助，以数字和姓名对列表进行排序

时间：2018-12-18 16:25:37

标签： javascript

我正在尝试使用名称a-z / z-a排序列表中的某些项目，或者使用下拉选项对价格进行低/高排序。 价格使用

，名称使用标签。

我环顾四周，但似乎没有多少人使用下拉<选项>菜单。 我不擅长JS ...但是我想向大家学习！ 

function price() {
  document.getElementById("list");
  
}

function name() {
  document.getElementById("list");
  
}
<div id="sort">
<p>Sort by</p>
<select>
<optgroup label= "Price"/>
<option value="low" onclick="price()">Price - Low </option>
<option value="high" onclick="price()">Price - High </option>
<optgroup label= "Name"/>
<option value="name"onclick="Name()">Name A - Z</option>
<option value="nameRev" onclick="name()">Name Z - A</option>
</select>
</div>


<ul>
<li><h1>$1 </h1><h2 class="item">B </h2></li>
<li><h1>$7 </h1><h2 class="item">A </h2></li>
<li><h1>$8 </h1><h2 class="item"> H</h2></li>
<li><h1>$11 </h1><h2 class="item">F</h2></li>
<li><h1>$5 </h1><h2 class="item">N </h2></li>
<li><h1>$7</h1><h2 class="item">M </h2></li>
<li><h1>$6</h1><h2 class="item">C </h2></li>
<li><h1>$9 </h1><h2 class="item">G </h2></li>
<li><h1>$4</h1><h2 class="item">I </h2></li>
<li><h1>$10</h1><h2 class="item">D </h2></li>
<li><h1>$5</h1><h2 class="item"> J</h2></li>
<li><h1>$2 </h1><h2 class="item">E </h2></li>
<li><h1>$3</h1><h2 class="item">K </h2></li>
<li><h1>$1.1 </h1><h2 class="item">L </h2></li>

<li><h1>$12 </h1><h2 class="item">ZB </h2></li>
<li><h1>$34 </h1><h2 class="item">AA </h2></li>
<li><h1>$56 </h1><h2 class="item"> VH</h2></li>
<li><h1>$74 </h1><h2 class="item">BF</h2></li>
<li><h1>$865 </h1><h2 class="item">BN </h2></li>
<li><h1>$35</h1><h2 class="item">CM </h2></li>
<li><h1>$87</h1><h2 class="item">CC </h2></li>
<li><h1>$65 </h1><h2 class="item">FG </h2></li>
<li><h1>$45</h1><h2 class="item">YI </h2></li>
<li><h1>$53</h1><h2 class="item">WD </h2></li>
<li><h1>$64</h1><h2 class="item"> KJ</h2></li>
<li><h1>$53</h1><h2 class="item">QE </h2></li>
<li><h1>$74</h1><h2 class="item">QK </h2></li>
<li><h1>$72 </h1><h2 class="item">YL </h2></li>
</ul>

这就是我所拥有的：

2 个答案:

答案 0 :(得分：1)

您应将这些项目的列表存储在数组中，并动态附加它们。这将使您能够对数据类型进行操作，而不是对文档中的硬编码值进行操作。

这样做之后，您可以使用本机Array.sort方法来实现所需的功能。同样，您之所以投票不足，也是由于您的一般性问题。要么更具体，要么花更多时间学习必要的技术以实现您想要的。

答案 1 :(得分：1)

exp
function price(direction) {
  // const direction = e.target.value
  // console.log(value)
  // console.log(direction)
  const ul = document.getElementsByTagName('ul')[0]

  // get the only ul
  let items = ul.innerHTML

  // split string lines to arr of items and only include valid items
  items = items.split('</h2></li>').filter(item => item.includes('$'))

  items = items.map(item => {
    // console.log(item)
    item = item.split('$')[1]
    const [strPrice, otherString] = item.split('</h1>')
    const price = parseFloat(strPrice)
    const name = otherString.split('<h2 class="item">')[1]
    return { price, name }
  })
  
  // console.log(items) // check the new arr of items

  // sort by comparing the float values of item.price
  direction === 'low' ?
  items = items.sort((a, b) => a.price > b.price) :
  items = items.sort((a, b) => a.price < b.price)
  // console.log(items)

  // clear the ul so that you can re-populate it
  ul.innerHTML = ''

  // append each (ordered) item to the ul
  items.forEach(item => {
    li = document.createElement('li')
    li.innerHTML = `<li><h1>$${item.price}</h1><h2 class="item">${item.name}</h2></li>`
    ul.appendChild(li)
  })

}

function name() {
  document.getElementById("list");
  
}

这里是操纵DOM以获得“价格排序”结果的示例。

您可以通过多种方式来完成此操作，我的答案与Aleksandar Grbic相似，但我将DOM删除以创建“项目”对象数组。

此外，请注意，使用一个参数来调用price函数以确定排序的方向。

要检查的关键区域：（{NMD是回答您自己的问题的重要的第一资源）String.split() method，Array methods (filter, map, forEach)和一般的DOM manipulation（我只是使用了第一个似乎是有帮助）。

我试图使该函数的流程易于遵循，并包括了有用的控制台日志，用于检查我的值是否在我想要/期望的地方。

如果您对价格功能有疑问，我很乐意回答，我将为您保留名称排序。

祝您好运，js很不错，因此请坚持不懈地进行修改+那里有大量的资源（FreeCodeCamp是一个很好的介绍）。

相关问题
最新问题