文章/答案/技术大牛

发布

社区首页 >问答首页 >在for循环内的数组上使用.extend的问题

问在for循环内的数组上使用.extend的问题
EN

Stack Overflow用户

提问于 2018-02-16 17:00:54

回答 2查看 109关注 0票数 0

我有一组复选框，根据选择的项目，将显示不同的上载字段。为了方便这一点，我希望动态创建一个数组，其中包含我想要获取的所有类(没有重复)。

我创建了一个包含以下细节的对象：

var uploadReq = {
    a: [".document-2"],
    b: [".document-1", ".document-3"],
    c: [".document-1"],
    d: [".document-2", ".document-3"],
    e: [],
    f: [".document-3"]
};

在本例中，如果有人选择了类别A和类别B，我们应该得到一个类似于[".document-2", ".document-1", ".document-3"]的数组(order并不重要)。

我有一个这样的事件侦听器：

$("#client-cat").change(function() {
    var arr = $("#client-cat input");
    var classes = [];

    for(i=0; i<arr.length; i++) {
        if(arr[i].checked) {
            var value = arr[i].value;
            var arr2 = uploadReq[value];
            $.extend(classes, arr2);
        }
    };

    console.log(classes);
})

HTML：

<form>
    <div class="segment">
        <label for="client-cat">Client category:</label>
        <div id="client-cat">
            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="a">
                <label>Category A</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="b">
                <label>Category B</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="c">
                <label>Category C</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="d">
                <label>Category D</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="e">
                <label>Category E</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="f">
                <label>Category F</label>
            </div>
        </div>
    </div>

    <div class="segment">
        <div class="document-1">
            <label for="document-1">Upload a copy of Document 1:</label>
            <input type="file" id="document-1" name="1" accept=".pdf">
        </div>

        <div class="document-2">
            <label for="document-2">Upload a copy of Document 2:</label>
            <input type="file" id="document-2" name="2" accept=".pdf">
        </div>

        <div class="document-3">
            <label for="document-3">Upload a copy of Document 3:</label>
            <input type="file" id="document-3" name="3" accept=".pdf">
        </div>
    </div>

</form>

但是，当我运行带有类别A和类别B的代码时，我只得到[".document-1", ".document-3"]。

我相信，每次for循环重新启动时，它都会恢复到classes的原始值，而不是从循环结束后重新启动它。

研究/尝试修复：

看看这条线，它讨论了使用$.extend来解决类似的问题(例如，合并两个数组而不捕获重复的数组)。
通过尝试代码来测试它是否是一个作用域问题： $("#client-cat“).change(函数(){ var arr =$(”#client-cat输入“)；var classes = []；for(i=0；i但是上面的日志记录的"bob"值和复选框一样多，所以我不认为这与class的范围有关。
考虑了合并数据的其他方法。示例：push工作，但我最终在数组中使用数组，这不是我想要的。示例：map可能会这样做，但不会清除重复的内容。

JSFiddle在这里。

javascript

jquery

arrays

loops

for-loop

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-16 17:11:01

$.extend不是添加数组的正确方式。它通过在第二个(或更高版本)对象中添加不在第一个对象中的属性来合并对象。但是当使用数组时，这两个数组都有一个0属性，因此第二个数组的第一个元素不会添加到第一个数组中。

附加数组的函数是concat。它不会修改数组的位置，您需要将其赋值给变量。

$("#client-cat").change(function() {
    var arr = $("#client-cat input:checked");
    var classes = [];

    arr.each(function() {
        classes = classes.concat(uploadReq[this.value]);
    });

    console.log(classes);
})

票数 4

Stack Overflow用户

发布于 2018-02-16 17:14:26

jQuery.extend()

First param:是一个对象，如果传入额外的对象，它将接收新属性，或者如果它是唯一的参数，它将扩展jQuery命名空间。

因此，对于数组，您将面临问题。

您可以使用以下方法： classes = [ ...classes, ...arr2]

var uploadReq = {
  a: [".document-2"],
  b: [".document-1", ".document-3"],
  c: [".document-1"],
  d: [".document-2", ".document-3"],
  e: [],
  f: [".document-3"]
};

$("#client-cat").change(function() {
  var classes = [];
  var arr = $("#client-cat input");
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].checked) {
      var value = arr[i].value;
      var arr2 = uploadReq[value];
      classes = [ ...classes, ...arr2];
    }
  }

  console.log(classes);
});

.segment {
  margin-bottom: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="checkbox-display.css">
</head>

<body>

  <form>
    <div class="segment">
      <label for="client-cat">Client category:</label>
      <div id="client-cat">
        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="a">
          <label>Category A</label>
        </div>

        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="b">
          <label>Category B</label>
        </div>

        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="c">
          <label>Category C</label>
        </div>

        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="d">
          <label>Category D</label>
        </div>

        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="e">
          <label>Category E</label>
        </div>

        <div>
          <input type="checkbox" tabindex="0" name="client-cat" value="f">
          <label>Category F</label>
        </div>
      </div>
    </div>

    <div class="segment">
      <div class="document-1">
        <label for="document-1">Upload a copy of Document 1:</label>
        <input type="file" id="document-1" name="1" accept=".pdf">
      </div>

      <div class="document-2">
        <label for="document-2">Upload a copy of Document 2:</label>
        <input type="file" id="document-2" name="2" accept=".pdf">
      </div>

      <div class="document-3">
        <label for="document-3">Upload a copy of Document 3:</label>
        <input type="file" id="document-3" name="3" accept=".pdf">
      </div>
    </div>

  </form>

  <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
  </script>

</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48831586

复制

相似问题

问在for循环内的数组上使用.extend的问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在for循环内的数组上使用.extend的问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在for循环内的数组上使用.extend的问题
EN