从动态数组中删除项目

Posted 2023-05-09

【中文标题】从动态数组中删除项目

【英文标题】：Remove items from a dynamic array

【发布时间】：2017-05-02 01:55:24

【问题描述】：

我有一些列表和复选框可用作过滤器，我需要做的是，当您选择复选框时，将该值添加到标题旁边的小标签中，然后取消选中然后删除该值。

我正在做这项工作，将每个值保存到一个数组中，当取消选中时尝试查找该值的索引并删除，但我认为我与数组中的位置有冲突。如果您一个接一个地单击然后一个接一个地删除，那么它可以工作，但是如果您单击所有这些并仅取消选中第一个，它将删除所有内容。知道如何解决它，但不确定如何继续。

有什么帮助吗？ https://jsfiddle.net/panconjugo/qsgwvp63/2/

$(function() 
  $(".filter-nav > li").each(function(index) 
    var brands = [];
    $(this).find("input:checkbox").each(function(index) 
      $(this).on("click", function() 
        if ($(this).is(":checked")) 
          console.log("adding: " + index);
          brands.push($(this).val());
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
         else 
          console.log("removing:" + index);
          brands.splice(index);
          console.log(brands);
          $(this).parent().parent().prev().find(".selected-group").text(brands.join(", "));
        
      );
    );
  );
);

【参考方案1】：

将代码brands.splice(index);更改为brands.splice(brands.indexOf($(this).val()), 1);

首先您必须从数组中找到项目索引，然后使用该索引从数组中删除

【参考方案2】：

不是通过添加/删除项目来维护数组，而是挂钩到复选框的change 事件，然后使用map() 构建一个新数组，其中包含所选项目的数据那个组。然后，您可以将其连接在一起并根据需要显示文本。试试这个：

$('.filter-nav input:checkbox').on("change", function() 
    var $parent = $(this).closest('.filter-nav > li');
    var items = $parent.find('input:checkbox:checked').map(function() 
    	return this.value;
    ).get();
    $parent.find('.selected-group').text(items.join(', '));
);

.filter-nav 
  list-style: none;
  padding: 0;

.filter-nav li 
  line-height: 40px;

.filter-nav > li > h3 
  background-color: #222;
  color: white;
  padding-left: 20px;
  cursor: pointer;

.selected-group 
  color: yellow;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filter-nav">
  <li>
    <h3>Brand <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="brand1">Brand1</label>
        <input type="checkbox" id="brand1" value="Brand 1">
      </li>
      <li>
        <label for="brand1">Brand2</label>
        <input type="checkbox" id="brand2" value="Brand 2">
      </li>
      <li>
        <label for="brand1">Brand3</label>
        <input type="checkbox" id="brand3" value="Brand 3">
      </li>
    </ul>
  </li>
  <li>
    <h3>Size <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="xs">XS</label>
        <input type="checkbox" id="xs" value="xs">
      </li>
      <li>
        <label for="m">M</label>
        <input type="checkbox" id="m" value="m">
      </li>
      <li>
        <label for="l">L</label>
        <input type="checkbox" id="l" value="l">
      </li>
    </ul>
  </li>
  <li>
    <h3>Color <small class="selected-group"></small></h3>
    <ul>
      <li>
        <label for="blue">Blue</label>
        <input type="checkbox" id="blue" value="blue">
      </li>
      <li>
        <label for="green">Green</label>
        <input type="checkbox" id="green" value="green">
      </li>
      <li>
        <label for="red">Red</label>
        <input type="checkbox" id="red" value="red">
      </li>
    </ul>
  </li>
</ul>

【讨论】：

只有当你点击了这篇文章左上角的向下箭头

我没有。无论如何，您的代码看起来比我的要好得多，只需几行和 boila !!，感谢您的帮助。 PS：azad 下面的答案也有效，但如果你保留我冗长而无聊的代码;)