Question

我有一个待办事项应用程序。

当设法按下添加按钮并随机删除时，我设法使其显示输入，但是当我单击完成按钮时，我想将li元素类更改为具有css背景色为红色的类，但是它没有工作。我尝试使用jQuery，但仍然无法正常工作。红色背景表明任务已完成。

index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="stil.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="centru">


    <div class="row">
      <div class="col-lg-12">
        <h2>TO DO LIST</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <input type="text" class="form-control" id="usr" placeholder="Input task...">
      </div>
      <div class="col-lg-6">
        <button type="button" class="btn btn-primary" onclick="adauga()">Add task</button>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <ul class="list-group" id="lista1">

        </ul>
      </div>

    </div>



    </div>




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

script.js


    function adauga() {

    var inp = document.getElementById('usr').value;
    var list = document.getElementById('lista1');
    var li = document.createElement('li');
    var lungime =  document.getElementById("lista1").getElementsByTagName('li').length;
    for(var i = 0; i < lungime ; i++) {

    li.setAttribute("id",i);

    }
     li.appendChild(document.createTextNode(inp));

     var button = document.createElement("button");
     button.innerHTML = "Delete";
     button.setAttribute("class","btn btn-primary ste");
     button.setAttribute("onclick","sterge()");

     //button.setAttribute("class","ste");
     li.appendChild(button);
     list.appendChild(li);

  //////////////////////////////////////

    var button2 = document.createElement("button");
    button2.innerHTML = "Done";
    button2.setAttribute("class","btn btn-primary done");
    button2.setAttribute("onclick","done()");

    li.appendChild(button2);
    list.appendChild(li);


    }

    function change() {
    li.setAttribute("class","xxx");
    }

    function sterge() {

    $('body').on('click','.ste', function(){
    $(this).parent().remove();
    });

    }

    function done() {
    $('body').on('click','done',function(){
    $(this).parent().setAttribute("class","btn btn-primary done xxx");
    });
    }

stil.css

    .centru {
     width: 600px ;
     margin-left: auto ;
     margin-right: auto ;

    }

    .lix {
     padding-right: 20px;
     }

    .xxx {
    background-color: red;
    color:red;
    }

Answer 1

您可以在完成的函数上使用addClass函数

function done() {
    $('body').on('click','.done',function(){
    $(this).parent().addClass("btn btn-primary done xxx");
    });
    }

按下按钮时更改li元素类，并且在该css类中更改背景色

1 个答案: