javascript - jQuery 动态添加选定值及其父数据，如格式化

Question

我的 html 代码如下所示

<input type="hidden" value="" id="shortcode_selected_package" name="shortcode_selected_package">

    <div class="selected-packages-wrap">
      <div class="shortcode-wrap">
        <a href="#" class="data-remove" data-id="220" data-name="New custom pack">-</a><label>New custom pack</label>
        <span class="package-cats">
                    <span><input class="package-cat" data-parent="220" value="5" type="checkbox">10 GB</span>
        <span><input class="package-cat" data-parent="220" value="6" type="checkbox">6 GB</span>
        <span><input class="package-cat" data-parent="220" value="26" type="checkbox">Sony</span>
        <span><input class="package-cat" data-parent="220" value="25" type="checkbox">Unlimited Calls</span></span>
      </div>

      <div class="shortcode-wrap">
        <a href="#" class="data-remove" data-id="417" data-name="Test New Packs">-</a><label>Test New Packs</label>
        <span class="package-cats">
                    <span><input class="package-cat" data-parent="417" value="5" type="checkbox">10 GB</span>
        </span>
      </div>

      <div class="shortcode-wrap">
        <a class="data-remove" href="#" data-id="219" data-cat-id="7|6|24" data-cat-name="12 - 20 GB|6 GB|Unlimited Messages" data-name="Test package">-</a><label>Test package</label>
        <span class="package-cats">
                    <span><input class="package-cat" type="checkbox" data-parent="219" value="7">12 - 20 GB</span>
        <span><input class="package-cat" type="checkbox" data-parent="219" value="6">6 GB</span>
        <span><input class="package-cat" type="checkbox" data-parent="219" value="24">Unlimited Messages</span>
        </span>
      </div>
    </div>

在我的代码中，当有人选中第一个 div 的 10 GB、无限调用复选框时，该值应分配给 shortcode_selected_pa​​ckage div。假设有人检查顶部 div 的第一个元素 data-id="220" 那么该值应该分配给该 div 就像

220[5|6]

再次，当有人点击第二个 div 的 10 GB 时，该值应该类似于

220[5|6],417[5]

同样，如果有人检查最后一个 div 的无限消息，那么该值应该是这样的

220[5|6],417[5],219[24]

如果有人取消选中该复选框，则相应的值也应从该值中删除

有人可以告诉我该怎么做吗？

在下面的代码中始终只显示一个数据。不更新已检查的旧版本。

$('div.selected-packages-wrap').find('input.package-cat').change(function() {
      var Parent = $(this).attr('data-parent');
      var Selected = $(this).val();
      var SelectedPackages = $('#shortcode_selected_package').val();
      if (SelectedPackages !== '' || SelectedPackages !== undefined) {
        tmp = SelectedPackages.split(',');

        var index = tmp.indexOf(Parent);

        if (index !== -1) {
          tmp.splice(index, 1);
          data = tmp.join('[' + Selected + '],');
          console.log(data);
        }
      }

    });

Answer 1

因此，您需要首先考虑如何构建数据，据我了解，用户可以从不同类别中选择多个包，因此您可能会得到类似的内容

{
  [categoryId]: Array<PackageId>,
}

例如

{
  244: [100, 200],
  500: [6, 7]
}

然后你需要找到一种方法将这些数据转换为这种字符串格式:244[100|200],500[6|7]，这是一种方法

function formatPackages(data) {
  var arr = [];
  for(var key in data) {
    if(data.hasOwnProperty(key) &&
      data[key] &&
      data[key].constructor === Array) {
      arr.push(key + '[' + data[key].join('|') + ']');
    }
  }
  return arr.join(',');
}

现在您需要选择和取消选择包的函数

var selectedPackages = {};

function selectPackage(parent, value) {
  if(selectedPackages[parent]) {
    selectedPackages[parent].push(value);
  } else {
    selectedPackages[parent] = [value];
  }
}

function unselectPackage(parent, value) {
  if(selectedPackages[parent]) {
    var index = selectedPackages[parent].indexOf(value);
    if(index > -1) {
      selectedPackages[parent].splice(index, 1);
    }
    if(selectedPackages[parent].length === 0) {
      delete selectedPackages[parent];
    }
  }
}

将所有部分组合在一起后，您可以添加用户处理

$('div.selected-packages-wrap').find('input.package-cat').change(function() {
  var parent = $(this).attr('data-parent');
  var value = $(this).val();

  if(this.checked) {
    selectPackage(parent, value);
  } else {
    unselectPackage(parent, value);
  }

$('#shortcode_selected_package').val(formatPackages(selectedPackages));
});

这是 jsfiddle 的链接:https://jsfiddle.net/bitriddler/eL9L8wxj/1/