主页 / 问题 / 1359013
Accepted
Игорь
Asked:2022-05-09 21:38:59 +0000 UTC2022-05-09 21:38:59 +0000 UTC

如果对象数组已经存在，则将它们推送到适当的类别中

  • 772

对不起标题，我不能更好地表达它。

有（好吧，因为它是 - 我创建它）以下形式的对象数组：

在此处输入图像描述

有些元素属于类型 - Сезон，有些 - to Размеры，我想将它们组合成类别，结果推送时，每次都会创建一个新对象。你能告诉我如何推入一个数组，使它看起来像这样吗？

在此处输入图像描述

这就是我的做法，显然我离正确的解决方案还很远。链接到沙盒。

function filterFunc() {
  let checkboxInputs = $('input[type="checkbox"]'),
      tempArr = [];
  
  checkboxInputs.on('click', function() {
    $(this).each(function() {
      let currentFilterTypeName = $(this).closest('.form-group').find('.title').text().trim(),
          currentFilterItemID = $(this).attr('id'),
          currentFilterItemValue = $(this).closest('li').find('label').text().trim();
    
          tempArr.push({
            currentFilterTypeName: currentFilterTypeName,
            currentFilterItemID: [currentFilterItemID],
            currentFilterItemValue: [currentFilterItemValue]
          });
    })
    
    console.log(tempArr);
  });
}
filterFunc();
ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.title {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    总的来说，我自己设法做到了，也许对某人有用。

    let filterForm = $('#catalogFilters');

function showSelectedFilters() {
    let filterGroup = filterForm.find('.form-group'),
        checkboxInput = filterForm.find('input[type="checkbox"]'),
        collectFilterArr = [];

    function checkboxSelected() {
        checkboxInput.on('click', function() {
            collectFilterArr = [];
            collectFilterData();
                        
            console.log(collectFilterArr);
        })
    }
    checkboxSelected();

    /* collect filters data */
    function collectFilterData() {
        filterGroup.each(function () {
            let valuesArr = [],
                idArr = [],
                checkedItems = $(this).find('input[type="checkbox"]:checked');

            if (checkedItems.length > 0) {
                checkedItems.each(function () {
                    let values = $(this).closest('li').find('label').text().trim();

                    valuesArr.push(values);
                });

                collectFilterArr.push({
                    type: $(this).closest('.form-group').find('.title').text().trim(),
                    value: valuesArr
                });
            }
        });
    }
}
showSelectedFilters();
    ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.title {
  margin-bottom: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="catalogFilters" class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

    • 0

相关问题