时间戳

首页 > 解决方案 > 如何使用函数从数组列表中使用单选按钮过滤/排序头发颜色

javascript - 如何使用函数从数组列表中使用单选按钮过滤/排序头发颜色

问题描述

我有一个带有字符的页面，当用户单击单选按钮时，我想显示带有黑色头发颜色的字符

<div id="filters">Filters settings</br>
    <p>Hair color</p>
    <input type="radio" id="AllHair" name="HairColor" value="AllHair">
    <label for="AllHair">Show all hair</label>
    <input type="radio" id="BlondeHair" name="HairColor" value="BlondeHair">
    <label for="BlondeHair">Show blonde hair</label>
    <input type="radio" id="BlackHair" name="HairColor" value="BlackHair">
    <label for="BlackHair">Show black hair</label>
</div>

这是我到目前为止的Javascript，我知道如何完成它

    function SortByHairColor(){
    let retourString = `<tr class="row" style="background-color: ${colors[house]}">
    <td id="column" class="column">${name}</td>
    <td id="column" class="column">${actor}</td>
    <td id="column" class="column"><img src="${image}"/></td>
</tr>`;

  for (let  i= 0; i < rdbHairColor.length; i++){
    if (rdbHairColor[i].checked){
      retourString += rdbHairColor[i];
      break;
    }
  }
  divToonGeslacht.innerHTML = retourString;
}

我的初始化函数

function Init()
{
    debugger;
    //start page
    const text = potterCharacters.map(character => {
        const { name, actor, image, house} = character
        return `<tr class="row" style="background-color: ${colors[house]}">
            <td id="column" class="column">${name}</td>
            <td id="column" class="column">${actor}</td>
            <td id="column" class="column"><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("rows").innerHTML = text ;
    filters = document.getElementById("filters");
    rdbHairColor = document.querySelectorAll('input[name="HairColor"][type="radio"]');

    rdbHairColor.addEventListener('change',SortByHairColor);
}

标签： javascriptarrayssorting

解决方案

我更新了我的答案。在这里，您可以看到我如何使用array.filter()选定的头发颜色来查找角色。

HTML

<p>Please select haircolor</p>
<div>
  <input type="radio" id="hair1" name="haircolor" value="black">
  <label for="hair1">black</label>
  <input type="radio" id="hair2" name="haircolor" value="red">
  <label for="hair2">red</label>
  <input type="radio" id="hair1" name="haircolor" value="brown">
  <label for="hair3">brown</label>
</div>
<table id="result"></table>

JAVASCRIPT

const resultField = document.querySelector("#result")
const radioButtons = document.querySelectorAll('input[name="haircolor"][type="radio"]')

let potterCharacters = [{name:"ron", haircolor:"red"}, {name:"hermione", haircolor:"brown"}, {name:"harry", haircolor:"black"}, {name:"snape", haircolor:"black"}]

for(let btn of radioButtons) {
    btn.addEventListener("change", (e) => updateSelection(e))
}

function updateSelection(e) {
  resultField.innerHTML = `<tr><td>NAME</td><td>HAIRCOLOR</td></tr>`
  let selection = potterCharacters.filter(char => char.haircolor == e.target.value)
  for(let character of selection) {
     let tr = document.createElement("tr")
     tr.innerHTML = `<td>${character.name}</td><td>${character.haircolor}</td>`
     resultField.appendChild(tr)
  }
}

在此处检查JSFiddle :)

推荐阅读