时间戳

首页 > 解决方案 > 单击复选框将项目添加到单独的 div 一次只显示一个项目

javascript - 单击复选框将项目添加到单独的 div 一次只显示一个项目

问题描述

我有一些有效的代码。基本上我有一个表格，每行旁边都有一个复选框，然后单击一个复选框将该特定行项目添加到一个单独的 div 中（即它将该行项目添加到“收藏夹列表”中）

我围绕代码实现了一个命名函数，以使上下文菜单正常工作（这与单击复选框的作用相同）。不仅上下文菜单根本不起作用，而且当单击复选框时，收藏夹 div 一次只显示一个列表项。此外，单击相同的复选框以删除列表项停止工作。

我改变了一些行，但它只是阻止了复选框完全工作。我相信问题的根源是命名函数，但我不想摆脱它，因为我确实想让上下文菜单正常工作。

复选框创建：

function makeChx(evt) {
  if (evt.target.type !== "checkbox") {
    $(":checkbox", this).trigger("click");
  }
}

$("#km-table-id tbody tr")
  .append($("<input />", {"type": "checkbox"})
  .addClass("checkbox-class"))
  .on("click", makeChx)

将项目添加到我的收藏夹 div：

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

function faveFunc(evt) {

    let data = table.row(this.parentNode).data(),
    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
        }
    }  

    for (var i = 0; i < favesArr.length; i++) {
        ($(".populate-faves").empty()); // removes all previous entries
        $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/> <br/>').addClass("faved-doc");  
    }
}; // ------------ faveFunc


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

上下文菜单 HTML：

<ul class="custom-menu">
    <li data-action="open">Open Document</li>
    <li id="add-id">Set As Favorite</li>
    <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>

我的收藏夹 div HTML：

<div id="myFave.hs-gc-header" class="faves-div">
    <p style="font-weight:bold">My Favorites:</p>
    <p class="populate-faves"></p>
</div>

---

更新：我将复选框渲染部分编辑为以前的内容，但没有运气： 
($("#km-table-id tbody tr")).on("click", function(evt) {

      if (evt.target.type !== "checkbox") {
        $(":checkbox", this).trigger("click");
      }
      console.log($("#km-table-id").is(":checked")); // shows as false...why?

    });

  $("#km-table-id tbody tr")
    .append($("<input />", {"type": "checkbox"})
    .addClass("checkbox-class"));

问题似乎与推送到阵列有关。它不会将所选项目添加到末尾，而是替换那里的任何一个。

标签： javascriptjqueryfunctioncheckbox

解决方案

推荐阅读