时间戳

首页 > 解决方案 > 显示特定优先任务（选择以获取特定任务列）

javascript - 显示特定优先任务（选择以获取特定任务列）

问题描述

我正在使用 HTML/CSS/JavaScript 做一个待办事项列表网页。我只显示了具有优先级（高/低/中）的用户输入的内容。我无法完成最后一部分（选择以获取特定任务）。

主要概念是，如果用户点击高/中/低按钮，它应该只显示相应的优先级列表。如果用户单击高优先级按钮，则仅显示高优先级列表数据。

高优先级（背景-红色），中优先级（背景-黄色），低优先级（背景-绿色）。您可以在任何地方显示最后一部分，此外，我们可以进行修改。

下面你可以看到我的代码。拜托，你能帮帮我吗？

const lists = document.getElementsByClassName('task-list')[0];
const radios = document.getElementsByName('rgPrior');

function onClick()
{
  for (let i = 0, length = radios.length; i < length; i++)
  {
    if (radios[i].checked)
    {
      btn_selected_color = radios[i].value + 'P';
      
      break;
    }
  }
  
  const task = document.getElementById('item').value;
  
  // Add it to the HTML
  addTodo(task, btn_selected_color);
  
  // Save it to localStorage
  let data = JSON.parse(localStorage.getItem('todo')) || [];
  data.push([
    task,
    btn_selected_color
  ]);
  localStorage.setItem('todo', JSON.stringify(data));
}

function addTodo(todo, priority)
{
  let entry = document.createElement('li');
  let close = document.createElement('button');
  
  entry.className = priority;
  close.className = 'close-btn';
  
  close.innerText = 'X';
  
  close.addEventListener('click', function(e)
  {
    // Delete from localstorage
    let data = JSON.parse(localStorage.getItem('todo'));
    let index = data.indexOf([
      todo,
      priority
    ]);
    
    data.splice(index, 1);
    
    localStorage.setItem('todo', JSON.stringify(data));
    
    // Delete HTML
    this.parentElement.remove();
  });
  
  entry.appendChild(close);
  entry.appendChild(document.createTextNode(todo));
  lists.appendChild(entry);
}

// When the page is loaded, get from localStorage
window.addEventListener('load', function()
{
  const data = JSON.parse(localStorage.getItem('todo'));
  
  data.forEach(function(task)
  {
    addTodo(...task);
  });
});
.hiP {background-color : red;}
        .medP {background-color: #ffbf00;}
        .lowP {background-color: green;}
        .ch5 {padding-left: 30px;}

        #box{
          width: 500px;            
          padding: 20px;
          margin: 20px;
          margin-left: auto;
          margin-right: auto;
          background-color: white;
          border-radius: 40px;
          box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5);
        }


        #box1{            
          text-align: center;
          width: 400px;            
          padding: 30px;
          margin: 30px;
          margin-left: auto;
          margin-right: auto;
          /* background-color: #140101; */
          /* background-color: #37283b; */
          background-image:  linear-gradient(rgb(218, 76, 76),#d1b562, rgb(122, 233, 122));
          border-radius: 20px;
        }
        #box2{            
          width: 400px;            
          padding: 30px;
          margin: 30px;
          margin-top: auto;
          margin-left: auto;
          margin-right: auto;
          /* background-image:  linear-gradient(red,#ffbf00, green); */
          /* background-color: rgb(160, 10, 122); */
          background-color: #c1d7f5;
          border-radius: 20px;
        }
        #box3{            
          text-align: center;
          width: 400px;
          padding: 30px;
          margin: 30px;
          margin-top: auto;
          margin-left: auto;
          margin-right: auto;
          /* background-color: rgb(22, 240, 22); */
          background-color: #93f6c6;
          border-radius: 20px;
        }
       
        .header{
          /* background-color: #5a9cda; */
          background-color: #38045a;
          color: white ;
          padding: 20px ;
          margin-top: -10px;
          margin: -10px;
          font-size: large;
         }
        .footer{
          position: fixed;
          padding: 10px 10px 0px 10px;
          margin: -10px;
          font-size: large;
          color: white;
          bottom: 0;
          width: 100%;
          height: 40px;
          /* background: #5a9cda; */
          background-color: #04267c;
        }

        .button1 {
            background-color: white; 
            color: black; 
            border: 2px solid #f44336;
            border-radius: 10px;
        }

        .button1:hover {
            background-color: #f44336;
            color: white;
        }
        .button2 {
            background-color: white; 
            color: black; 
            border: 2px solid #ffbf00;
            border-radius: 10px;
        }

        .button2:hover {
            background-color: #ffbf00;
            color: white;
        }
        .button3 {
            background-color: white; 
            color: black; 
            border: 2px solid green;
            border-radius: 10px;
        }

        .button3:hover {
            background-color: green;
            color: white;
        }
        .button4 {
            background-color: white; 
            color: black; 
            border: 2px solid green;
            border-radius: 10px;
        }

        .button4:hover {
            background-color: green;
            color: white;
        }
<div class="header" align="center">
      <header>MY TO_DO LIST</header>
    </div>
    <div id="box">
        <div id="box1" >
            <form >
                <label for="txtAdd" style="font-size: 20px;color: white;"><b> Enter New thing to do: </b></label>
                <input name="txtAdd" type="text"  id="item"  />
            </form>
            <p style="font-size: 20px; color: white;"><b> Set Priority </b></p>
            <p>
                <label style="color: #ce1126; font-size: 20px;"><input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>HIGH</label>
                <label style="color: #ce1126; font-size: 20px;"><input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>MEDIUM</label>
                <label style="color: #ce1126; font-size: 20px;"><input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>LOW</label>     
            </p>
            <input type="button" name="btnAdd" class="button4" id="btnAdd" value="Save The Task" onClick="onClick()" />
        </div>

        <p style="text-align: center; color: rgba(3, 95, 30, 0.767); font-size: 20px;"><b> WORK TO-DO </b></p>

        <div id="box2">      
            <ul class="task-list"> </ul>
        </div>
        
        <div id="box3">    
            <p style" -20px;color: rgb(56, 4, 155); font-size: 20px;">Select to get Specific tasks</p>
            <button class="button1">HIGH</button>
            <button class="button2">MEDIUM</button>   
            <button class="button3">LOW</button>        
        </div>
    </div>   

    <div class="footer" align="center" >
      <marquee direction="right" >ThankYou, Visit again</marquee>      
    </div>

标签： javascriptarrays

解决方案

Array.prototype.filter()

这是一个如何过滤列表的工作示例：

const items = [{
  value: 'Item 1',
  className: 'low',
}, {
  value: 'Item 2',
  className: 'high',
}, {
  value: 'Item 3',
  className: 'low',
}, {
  value: 'Item 4',
  className: 'medium',
}, {
  value: 'Item 5',
  className: 'medium',
}];

const ul = document.getElementById('filtered-list');
const button1 = document.getElementById('high-priority');
const button2 = document.getElementById('medium-priority');
const button3 = document.getElementById('low-priority');

const createListItems = function createListItems(filteredList) {
  ul.innerHTML = '';

  filteredList.map((item) => {
    const li = document.createElement('li');
    li.append(item.value);
    li.className = item.className;
    ul.append(li);
  });
};

const click = function click(event) {
  event.preventDefault();

  const t = this;
  const filtered = items.filter(item => item.className === t.priority);
  createListItems(filtered);
}

button1.addEventListener('click', click.bind({ priority: 'high' }));
button2.addEventListener('click', click.bind({ priority: 'medium' }));
button3.addEventListener('click', click.bind({ priority: 'low' }));

createListItems(items);
.high { background-color: red; }
.medium { background-color: yellow; }
.low { background-color: green; }
<ul id="filtered-list"></ul>

<button id="high-priority" type="button">High Priority</button>
<button id="medium-priority" type="button">Medium Priority</button>
<button id="low-priority" type="button">Low Priority</button>

以下是它在您的代码中的外观。只需从您的 HTML 中删除 onClick ，否则它将添加该项目两次。

const lists = document.getElementsByClassName('task-list')[0];
const radios = [...document.getElementsByName('rgPrior')];
const btnAdd = document.getElementById('btnAdd');
const button1 = document.getElementsByClassName('button1')[0];
const button2 = document.getElementsByClassName('button2')[0];
const button3 = document.getElementsByClassName('button3')[0];

const items = [];

const addTodo = function addTodo(todo, priority) {
  const entry = document.createElement('li');
  const close = document.createElement('button');

  items.push({
    value: todo,
    className: priority,
  });

  entry.className = priority;
  close.className = 'close-btn';

  close.innerText = 'X';

  close.addEventListener('click', function click(event) {
    event.preventDefault();

    // Delete from localstorage
    const data = JSON.parse(localStorage.getItem('todo'));
    const index = data.indexOf([
      todo,
      priority,
    ]);

    data.splice(index, 1);

    localStorage.setItem('todo', JSON.stringify(data));

    // Delete HTML
    this.parentElement.remove();
  });

  entry.appendChild(close);
  entry.appendChild(document.createTextNode(todo));
  lists.appendChild(entry);
};

const onClick = function onClick() {
  let btnSelectedColor;

  radios.map((radio) => {
    if (radio.checked) {
      btnSelectedColor = `${radio.value}P`;
    }
    return false;
  });

  const task = document.getElementById('item').value;

  // Add it to the HTML
  addTodo(task, btnSelectedColor);

  // Save it to localStorage
  const data = JSON.parse(localStorage.getItem('todo')) || [];

  data.push([task, btnSelectedColor]);

  localStorage.setItem('todo', JSON.stringify(data));
};

btnAdd.addEventListener('click', onClick);

const createListItems = function createListItems(filteredList) {
  lists.innerHTML = '';

  filteredList.map((item) => {
    const li = document.createElement('li');
    li.append(item.value);
    li.className = item.className;
    lists.append(li);
    return false;
  });
};

const filterItems = function filterItems(event) {
  event.preventDefault();

  const t = this;
  const filtered = items.filter((item) => item.className === t.priority);
  createListItems(filtered);
};

button1.addEventListener('click', filterItems.bind({ priority: 'hiP' }));
button2.addEventListener('click', filterItems.bind({ priority: 'medP' }));
button3.addEventListener('click', filterItems.bind({ priority: 'lowP' }));

// When the page is loaded, get from localStorage
window.addEventListener('load', () => {
  const data = JSON.parse(localStorage.getItem('todo'));

  data.forEach((task) => {
    addTodo(...task);
  });
});

推荐阅读