问在用户输入的列表中添加'active-class‘
EN

Stack Overflow用户

提问于 2019-11-25 01:33:28

回答 1查看 46关注 0票数 0

大家好，我是Javascript的新手，正在尝试一些不同的东西。我有一个ul，用户可以输入一些li:s。

我的目标是将一个li类设置为active，然后通过引用active类来删除它。就像一个待办事项清单，但很轻便。

我尝试了很多不同的方法，下面的代码是我现在得到的，它不能正常工作……第一个函数只是将元素添加到列表中，第二个函数应该将一个li元素的类设置为active。我希望自己解决的移除部分..

我非常感谢您的任何意见。谢谢!

function addElementLast (){
let textValue = document.getElementById('candidate').value;
if(textValue == ''){
    alert('Type something')
}else{
    let newLi = document.createElement('li')
    newLi.setAttribute('class', 'toggle');
    let get = document.getElementsByTagName('ul')[0];
    let textNode = document.createTextNode(textValue);
    newLi.appendChild(textNode);
    get.appendChild(newLi);
}}
     var parent = document.getElementById("dynamic-list");
     var child = parent.getElementsByClassName("toggle");
     for (var i = 0; i < child.length; i++) {
     child[i].addEventListener("click", function() {
     var current = document.getElementsByClassName("active");
     if (current.length > 0) { 
     current[0].className = current[0].className.replace(" active", "");
     }
     this.className += " active";
     });
     }

     document.getElementById('btn').addEventListener('click', addElementLast)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adding to ul</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h2 id="heading" class="text-center">Adding to UL</h2>
            <ul id="dynamic-list">

            </ul>
        <input type="text" id="candidate" placeholder="Write here">
        <button type="button" id="btn" class="btn btn-success">Add item</button>
        <button type="button" id="btn1" class="btn btn-danger">Remove item</button>
    </div>


    <script src="script.js"></script>
</body>
</html>

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-25 03:15:40

我认为，如果您在JS中操作一个列表，并在UI中呈现一个HTML“模板”，效果会更好。

它更快，更容易跟踪项目，更容易改变算法。

let todoList = []

// adding to the todo list
function addTodo(s, arr) {
  if (s) {
    arr.push({
      text: s,
      active: false
    })
  }
  return arr
}

// creating the html that should be rendered
function createTodoListHTML(arr) {
  let html = ''
  arr.forEach(e => {
    const active = e.active ? ' active' : ''
    html += `<li class="item${active}">${e.text}</li>`
  })
  return html
}

// rendering the list
function displayTodoList(html) {
  document.getElementById('dynamic-list').innerHTML = html
  activate(todoList)
}

// handling add item btn click
document.getElementById('btn').addEventListener('click', function(e) {
  let input = document.getElementById('candidate')
  addTodo(input.value, todoList)
  displayTodoList(createTodoListHTML(todoList))
  input.value = ''
})

// adding event listener to li items
function activate(list) {
  const children = document.querySelectorAll('#dynamic-list .item')
  children.forEach((e, i) => {
    e.addEventListener('click', function(el) {
      todoList[i].active = !todoList[i].active
      displayTodoList(createTodoListHTML(todoList))
    })
  })
}



// removing items from the list and the UI
const btnRemove = document.getElementById('btn1')

btnRemove.addEventListener('click', function(e) {
  todoList = removeItems(todoList)
  displayTodoList(createTodoListHTML(todoList))
})

function removeItems(arr) {
  return arr.filter(e => !e.active)
}

.active {
  font-weight: 700;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <h2 id="heading" class="text-center">Adding to UL</h2>
  <ul id="dynamic-list">

  </ul>
  <input type="text" id="candidate" placeholder="Write here">
  <button type="button" id="btn" class="btn btn-success">Add item</button>
  <button type="button" id="btn1" class="btn btn-danger">Remove item</button>
</div>


<script src="script.js"></script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59020497

复制

相似问题

问在用户输入的列表中添加'active-class‘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在用户输入的列表中添加'active-class‘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在用户输入的列表中添加'active-class‘
EN