WordPress jQuery - 选中复选框创建对象数组并基于它创建 HTML-解网

问：

我在 wordpress 上，我写了一个 ajax 过滤器搜索，结果是每个项目都有一个复选框，如果选中它，就会获取该项目 html 并将其添加到模态中。

几天前我问过这样的问题，并得到了一个好心人的回答，但我的需求发生了变化：

我想获取每个选中的项目信息并将其插入到如下所示的对象数组中：

[
{item: item1, state: state one},
{item: item2 , state: state two}, 
{item: item3 , state: state one}, 
{item: item4 , state: state three}
]

在这种情况下，我添加了未排序的项目。我想在每次对象添加到此数组时按“状态”对此数组进行排序。（每个项目都有很多价值，如城市、位置等。我只是简化我的问题）

最后，这个对象数组插入到模态中，就像之前的 HTML 一样，但经过排序。

这是我的第一个 HTML 包装器和模态：

const $modal = $('.modal');
const $checkboxes = $('.add-to-modal').on('change', e => {
  let modalContent = $checkboxes.filter(':checked').map((i, cb) => $(cb).closest('.item').clone()).get();
  $modal.html(modalContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-wrapper">
    <li class="item" data-id="123">
        <p class="title">title 1</p>
        <p class="state">state one</p>
        <label>
            <input type="checkbox" value="123" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item" data-id="125">
        <p>title 2</p>
        <p class="state">state two</p>
        <label>
            <input type="checkbox" value="125" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item" data-id="163">
        <p>title 3</p>
        <p class="state">state one</p>
        <label>
            <input type="checkbox" value="163" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item">
        <p>title 4</p>
        <p class="state">state three</p>
        <label>
            <input type="checkbox" value="223" class="add-to-modal">
         add to modal</label>
    </li>
</ul>
<hr>
<ul class="modal">

</ul>

另外，我想知道如果用户想要搜索另一个项目并选中相同的项目复选框，如何删除重复的对象;这对我来说非常重要。

排序后结果应如下所示：

[
{item: item1, state: state one},
{item: item3 , state: state one}, 
{item: item2 , state: state two}, 
{item: item4 , state: state three}
]

如果选中另一个复选框，例如“状态二”中的“item7”，则对象应插入状态为二的 item2 之后（以及在 HTML 中）。

这是我过去的问题：Checkbox Foreach 使用 jQuery 从第一个包装器和模态中删除确切的项目

谢谢。

JavaScript jQuery 数组 WordPress 对象

const $modal = $('.modal');
const $checkboxes = $('.add-to-modal').on('change', e => {
  const checks = $checkboxes.filter(':checked')

  // CUSTOM SORT BASED ON THE "STATUS" TEXT
  const sortedChecks = checks.sort((a, b) => {
    if ($(a).parent().prev().text().trim() > $(b).parent().prev().text().trim()) {
      return 1
    } else if ($(a).parent().prev().text().trim() < $(b).parent().prev().text().trim()) {
      return -1
    } else {
      return 0
    }
  })
  
  
  const objArray = []
  for (const element of sortedChecks) {
    objArray.push({
      item: 'item' + $(element).val(),
      state: $(element).parent().prev().text().trim()
    })
  }
  console.log(JSON.stringify(objArray))


  const modalContent = sortedChecks.map((i, cb) => $(cb).closest('.item').clone()).get();
  $modal.html(modalContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-wrapper">
  <li class="item" data-id="123">
    <p class="title">title 1</p>
    <p class="state">state one</p>
    <label>
      <input type="checkbox" value="123" class="add-to-modal">
      add to modal</label>
  </li>
  <li class="item" data-id="125">
    <p>title 2</p>
    <p class="state">state two</p>
    <label>
      <input type="checkbox" value="125" class="add-to-modal">
      add to modal</label>
  </li>
  <li class="item" data-id="163">
    <p>title 3</p>
    <p class="state">state one</p>
    <label>
      <input type="checkbox" value="163" class="add-to-modal">
      add to modal</label>
  </li>
  <li class="item">
    <p>title 4</p>
    <p class="state">state three</p>
    <label>
      <input type="checkbox" value="223" class="add-to-modal">
      add to modal</label>
  </li>
</ul>
<hr>
<ul class="modal">

</ul>

WordPress jQuery - 选中复选框创建对象数组并基于它创建 HTML

wordpress jquery - checked checkboxes create array of objects and create html base on it

评论

评论