Как мне создать функцию, которая будет удалять флажки "задачи", которые я добавил после проверки их? - PullRequest
Новая
       27

Как мне создать функцию, которая будет удалять флажки "задачи", которые я добавил после проверки их?

1 голос
/ 18 апреля 2020

Я выполняю задание и создаю диспетчер задач. У меня работает добавление новой задачи, однако у меня возникают проблемы с отменой, когда после нажатия на флажок происходит обратное. Я почти уверен, что это почти работает, вероятно, есть всего пара строк, которые нужно настроить.

Вот весь мой HTML и JS / jQuery код для контекста:

HTML: 

<div>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
        </script>
    </head>

        <div id="sidebar">
            <h2>Overall Status</h2>

                <div class="sb" id="schl.stat">
                    <h3>School -</h3>
                        <input type="submit" id="schl.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Work -</h3>
                        <input type="submit" id="wrk.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Weekend -</h3>
                        <input type="submit" id="wknd.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Other -</h3>
                        <input type="submit" id="othr.bttn" value="0">
                </div>

         </div>

         <div id="tasks">
             <div id="newtask">
                 <h2>Add New Task</h2>


                 <div id="IDK">
                     <div id="idk">
                        <label for="options">Options*</label>
                            <select id="options">
                                <option hidden disabled selected value>------------------------------------------</option>
                                <option value="School">School</option>
                                <option value="Work">Work</option>
                                <option value="Weekend">Weekend</option>
                                <option value="Other">Other</option>
                            </select>
                     </div>

                        <div id="idk2">
                            <label for="date">Completion Date</label>
                                <input type="date" id="date">
                        </div>
                 </div>

                    <label for="tdesc">Description*</label>
                        <input type="text" id="tdesc" size="75">

                    <input type="submit" id="add" value="Add">
                        <div id="req"><strong>* Required fields</strong></div> 
            </div>




              <div id="current">

                    <h2>Current Tasks</h2>

                          <div id="schlwrk">
                              <div id="schl">
                                  <h4>School</h4>
                                  <br>
                              </div>

                              <div id="wrk">
                                  <h4>Work</h4>
                                  <br>
                              </div>
                          </div>

                          <div id="wkndothr">
                                <div id="wknd">
                                  <h4>Weekend</h4>
                                  <br>
                                </div>
                                <div id="othr">
                                  <h4>Other</h4>
                                  <br>
                                </div>
                          </div>
              </div>



        </div>
</div>

JS / jQuery: 

var a = 0;
var b = 0;
var c = 0;
var d = 0;



function addTask() {

  var newTask = $("#tdesc").val();
  var newTask2 = $("#date").val();

  if ($("#options").val() == "" || $("#tdesc").val() == "") {
    alert("You have not completed all required fields.");

  } else if ($("#options").val() == "School") {
    $("#schl").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox1'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

  document.getElementById("schl.bttn").value = ++a;

  } else if ($("#options").val() == "Work") {
    $("#wrk").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox2'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                    "<br>");

    document.getElementById("wrk.bttn").value = ++b;

  } else if ($("#options").val() == "Weekend") {
    $("#wknd").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox3'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

    document.getElementById("wknd.bttn").value = ++c;

  } else {
    $("#othr").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox4'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

    document.getElementById("othr.bttn").value = ++d;
  }

  $("#tdesc").val("");
  $("#date").val("");

}

$(document).ready(function() {
     $("#add").on("click", function() {
         addTask();
});
});












**var checkBox1 = $(".checkbox1");
var checkBox2 = $(".checkbox2");
var checkBox3 = $(".checkbox3");
var checkBox4 = $(".checkbox4");
function deleteTask() {

if (checkBox1.is(":checked")) {
    $("schl").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox1'" +
                     "value=" + 
                     newTask + 
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("schl.bttn").value = --a;

} else if (checkBox2.is(":checked")) {
    $("wrk").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox2'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                    "<br>");

document.getElementById("wrk.bttn").value = --b;

} else if (checkBox3.is(":checked")) {
    $("wknd").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox3'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("wknd.bttn").value = --c;

} else {
    $("othr").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox4'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("othr.bttn").value = --d;
  }
}
$(document).ready(function() {
     $(":checkbox").on("click", function() {
         deleteTask();
});
});**

Любая помощь будет принята с благодарностью :) Спасибо

1 Ответ

0 голосов
/ 18 апреля 2020

Основная проблема заключается в том, что обработчик событий «по щелчку» устанавливается, когда документ готов, и в этот момент в документе нет флажка (таким образом, deleteTask никогда не вызывается).

Вы должен установить обработчик события щелчка в addCheckbox.

Однако в вашем коде есть другие проблемы:

  • У вас есть несколько $(document).ready(function(){});, используйте только один в вашем коде.
  • Вы должны создать свои флажки таким образом, ваш код будет более читабельным: 
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).appendTo($('#othr'));
$('<label />', {  text: newTask+newTask2 }).appendTo($('#othr'));
  • Вы должны использовать уникальный идентификатор (добавив атрибут id) установите флажки и укажите этот идентификатор в атрибуте for ваших ярлыков , чтобы пользователь мог щелкнуть ярлык, чтобы установить флажок.
  • В вашем обработчике on click, Вы можете использовать $(this), чтобы получить элемент, по которому щелкнул пользователь (например, когда вы хотите найти флажок, по которому щелкнул пользователь).
...