代码之家  ›  专栏  ›  技术社区  ›  user2371684

根据结果用javascript更改p的背景色

  •  1
  • user2371684  · 技术社区  · 6 年前

    我需要在p标记中更改结果的背景色,如果变量的结果为>则为1。 我想这可以通过一个if语句来完成吗? 这是我正在处理的代码:

    const todos = [{
      text: 'Order airline tickets',
      completed: false
    },{
      text: 'Vaccine appointment',
      completed: true
    }, {
      text: 'Order Visa',
      completed: true
    }, {
      text: 'Book hotell',
      completed: false
    }, {
      text: 'Book taxi to airport',
      completed: true
    }]
    
    const filters = {
      searchText: ''
    }
    
    const renderTodos = function (todos, filters) {
    
      //use filter method for the title search string and save it to filters variable
        const filteredTodos = todos.filter(function (todo) {
            return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
        })
    
        const notDone = filteredTodos.filter(function (todo) {
          return !todo.completed
        })
    
        //Empty the div containg the result, this has to be between filter and the display of the result
        document.querySelector('#todos').innerHTML = ''
    
        const summary = document.createElement('h4')
        summary.textContent = `You found ${notDone.length} hits on this search that are not complete`
        document.querySelector('#todos').appendChild(summary)
    
    
    
        //loop through note object, create a p tag for the title searched and append to the div
        filteredTodos.forEach(function (todo) {
            const noteEl = document.createElement('p')
            noteEl.textContent = todo.text
            document.querySelector('#todos').appendChild(noteEl)
    
        })
        elem = document.createElement("hr")
        document.querySelector('#todos').appendChild(elem)
    }
    
    document.querySelector('#search-todo').addEventListener('input', function (e) {
      filters.searchText = e.target.value
      renderTodos(todos, filters)
    })
    

    所以搜索的结果,如果还有!todo.completed在我要附加到todos div的p标记中,只有那些p标记的p背景色应该是黄色。

    谢谢

    1 回复  |  直到 6 年前
        1
  •  2
  •   Jack Bashford    6 年前

    if forEach

    if (!todo.completed) {
        noteEl.style.backgroundColor = "yellow";
    }
    

    filteredTodos.forEach(function (todo) {
        const noteEl = document.createElement('p');
        noteEl.textContent = todo.text;
        if (!todo.completed) {
            noteEl.style.backgroundColor = "yellow";
        }
        document.querySelector('#todos').appendChild(noteEl);
    })