Question

我有一个填充的JSON数据表，每个表旁边都有一个复选框---我想要它，这样当选中一个复选框时，它将所选的项目推入数组（在本例中为div myFave.hs-gc-header）

当我console.log(arr)时，它只显示了一堆空数组（我相信每个列表项都有一个）。不知道为什么会这样-如果有人可以阐明这一点，那就太好了。

我认为问题在于populateArr()块，但我不能肯定地说。

JS：

loadTableData() {
  let tableRes = redactedName.d.results.filter(function(val) {
    return (val.FileLeafRef.trim().length > 0);
  }).map(function(obj) {
    return {
      // "FileName": obj.FileLeafRef,
      // "Path": obj.EncodedAbsUrl,
      "Titles": obj.File.Name
    }
  });

  let allTitles = tableRes;

  for (var i = 0; i < allTitles.length; i++) {
    let tr = $("<tr/>");
    $(tr).append("<td>&nbsp;</td>");
    $(tr).append("<td>" + allTitles[i].Titles + "</td>");
    $(tr).append("<input type='checkbox'/>").addClass("checkbox").val("val");

    /* ---------- */

    function populateArr() {
      let arr = [];
      $(".checkbox input[type='checkbox']:checked").each(function() {
        arr.push($(this).val());
      });
      return arr;
    }

    $("#myFave.hs-gc-header").click(function() {
      populateArr();
    })
  };

HTML代码段

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="description here">
    <meta name="keywords" content="keywords,here">
    <!------------------------------->
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.2/core.min.js"></script>
    <script 
      type="text/javascript" 
      src="dist/js/jquery_wrapper.min.js"></script>
  </head>
  <body>
    <script src="./bundle.js"></script>

    <div class="km-div-container">
      <div class="col-md-2"> <!-- Left -->
          <div class="form-group">
              <input 
                type="search" 
                class="form-control" 
                id="searchbar" 
                placeholder="Search All Documents...">
          </div>

          <div id="myFave.hs-gc-header">
            <p>My Favorites:</p>
          </div>
      </div>
    </div> <!-- km -->
  </body>
</html>

Answer 1

我认为这行不通，使用香草JavaScript时遇到类似的问题。

当您像下面那样添加到dom时，将无法向html标签添加事件监听器。

$(tr).append("<input type='checkbox'/>").addClass("checkbox").val("val");

当使用属性检查过滤.checkbox时，应该在for循环中执行此操作。

// convert code to jquery
let checkbox = document.createElement('checkbox');
check.setAttribute('type', 'checkbox');
checkbox.className = 'checkbox';
tr.appendChild(checkbox);

使用复选框将所选项目呈现到<div>

JS：

HTML代码段

1 个答案: