Снятие отметки с элемента списка дублирует его в div - PullRequest
Новая
       5

Снятие отметки с элемента списка дублирует его в div

0 голосов
/ 01 февраля 2019

У меня есть таблица документов с флажком рядом с каждой строкой.В идеале нажатие на флажок добавляет его в отдельный div («Список избранного»), но , когда я снимаю флажок, вместо дубликата создается дубликат документа html.Похоже, что снятие отметки с пункта и проверка его рассматриваются как одно и то же.Не уверен почему.Есть мысли? 

let $table = $("#km-table-id")
  let table = $table.DataTable();
  let favesArr = [];

    function faveFunc(evt) {

      // let data = table.row(this.parentNode).data(),
       let data = $($(evt.target).prev().find("a")[0]).html(),
      checked = $(this).is(":checked"),
       dataIndex = favesArr.indexOf(data);
      if (checked) {
        if (dataIndex === -1) {
          favesArr.push(data); // add item
        }
      } else {
        if (dataIndex > -1) {
          favesArr.splice(dataIndex, 1); // remove item
        }
      }  



// ($(".populate-faves").empty());
$(".populate-faves").append((data) + '<br/><br/>').addClass("faved-doc")  




}; // ------------ faveFunc


      $(".checkbox-class").on("click", faveFunc)
      $("#add-id").on("click", faveFunc)

Обновление: 

function faveFunc(evt) {

  let $table = $("#km-table-id")
  let table = $table.DataTable();
  let favesArr = [];

let data = $($(evt.target).prev().find("a")[0]).html()

function newList() {
      $(".populate-faves").html("");
      $("#km-table-id tbody tr").each(function(i, el) {
        let fave = $(el).find(".checkbox-class");
        let itemText = $(el).find(data);
        if($(fave).is(":checked")) { // ------ checked is coming up undefined
          $(".populate-faves").append("<li>" + $(itemText).html() + "</li>")
        }
      });
    }

    $(".checkbox-class").on("change", newList);


    console.log(checked); // true and false working

}; // ------------ faveFunc

$(".checkbox-class").on("click", faveFunc)
      $("#add-id").on("click", faveFunc)

1 Ответ

0 голосов
/ 01 февраля 2019

Я бы порекомендовал вам попробовать этот подход.Это всего лишь пример, вам нужно адаптировать его к вашим потребностям. 

$(document).ready(function() {
    'use strict';
  
  const updateFavoritesList = () => {
    $("#favoritesList").html("");
    $("#itemsList tr").each(function(i, el){
      const favorite = $(el).find(".favorite-check");
      const itemText = $(el).find("td:first-child");
      if($(favorite).is(":checked")){
        $("#favoritesList").append("<li>" + $(itemText).html() + "</li>")
      }
    });
  }
  
  $(".favorite-check").on("change", updateFavoritesList);
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="itemsList">
  <tbody>
    <tr>
      <td>
        Item 1
      </td>
      <td>
        <input class="favorite-check" type="checkbox">
      </td>
    </tr>
    <tr>
      <td>
        Item 2
      </td>
   
     
      <td>
        <input class="favorite-check" type="checkbox">
      </td>
    </tr>
    <tr>
      <td>
        Item 3
      </td>
      <td>
        <input class="favorite-check" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

<h4>Favorite items</h4>
<ol id="favoritesList" class="favorites-list"></ol>
...