插入带有单击标签文本的节点

Question

我有这部分电子商务代码。

function appendChildElement() {
    var labelOptionSelected = $("#filters fieldset label");
    labelOptionSelected.each(function() {
      labelOptionSelected.click(function() {
        setTimeout(function() {
          if ($(labelOptionSelected).hasClass('sr_selected')) {
            const text = $('.sr_selected').text();
            const insertNode = document.querySelector(".fg-container--filterSelected");
                  insertNode.innerHTML = "<a href='#' onclick='' class='fg-container--filterSelected-option'>" + text + " x</a>";
          }
        }, 500);
      });
    });
  }
  appendChildElement();

我需要的是每个<label>点击，复制所说<label>的文本并将其插入到特定链接中。

这意味着如果我点击<label 1>，复制此<label> 的文本并使用该文本创建一个链接，如果我点击<label 2>，则复制此< label> 的文本并放入在另一个附加链接中。

我将代码示例放在当前工作状态

<div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1Clicked label 2Clicked label 3Clicked label 4</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

当前代码工作但不正确，如果我点击标签 1，它会添加带有文本的链接，但如果我另外点击标签 2，它会添加文本但在同一个初始链接中。并且需要在同一个 <div> 中的单独链接中出现这样的结果：

<div class="container">
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 2</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 3</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

该功能主要用于页面 PDP 中的类别过滤器。

附上他们要求的样机，也许他们会通过图片更好地理解我

Mockup

请告诉我，你可以帮助我，我已经查看了几个部分，但我找不到解决方案。

先谢谢了

Answer 1

好吧，不确定这是否是您所追求的，但我简化了您的代码，使您不能两次添加相同的链接，并添加了一种删除链接的方法。另外，由于您将其标记为 jquery，因此我将其全部设为 jquery

$("#filters fieldset label").click(function() {
  let t = $(this).text().trim();
  let newlink = `<a href='#' onclick='removeMe(this)' class='fg-container--filterSelected-option' data-val="${t}">${t}</a>`;
  let exists = $(`.container a[data-val="${t}"]`).length > 0;
  if (!exists) $('.container').append(newlink)
});

function removeMe(el) {
  $(el).remove();
}

.container a,
label {
  display: block;
  margin: 2px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='filters'>
  <div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <div>
      <fieldset>
        <label class="00001" title="00001" index="0">Category Name 1</label>
        <label class="00002" title="00002" index="1">Category Name 2</label>
        <label class="00003" title="00003" index="2">Category Name 3</label>
        <label class="00004" title="00004" index="3">Category Name 4</label>
      </fieldset>
    </div>

Answer 2

在我看来，你不需要每个<label> 标签。

你可以顺便添加点击事件：

<script>
    const insertNode = $('.container')
    const filters = $('#filters')

    $('#filters fieldset label').click(function (e) {
        const text = $(this).text();

        // Check if a tag with the content TEXT has been added before or not
        // You can see detail find() function in here: https://api.jquery.com/find/
        // This is my way to check duplicate labels, you can consider another way
        const isAdded = insertNode.find('a[data-text="'+ text +'"]');
        if (isAdded.length === 0) {
            const html = "<a href='#' data-text='"+ text +"' onclick='' class='fg-container--filterSelected-option'>" + text + " x</a>"
            insertNode.append(html)
        }
    })
</script>

点击<label>时。 div 标签如下所示：

<div class="container">
    <a href="#" data-text="Category Name 1" onclick="" class="fg-container--filterSelected-option">Category Name 1 x</a>
    <a href="#" data-text="Category Name 2" onclick="" class="fg-container--filterSelected-option">Category Name 2 x</a>
    <a href="#" data-text="Category Name 3" onclick="" class="fg-container--filterSelected-option">Category Name 3 x</a>
</div>

如何删除它们，当您单击它们时。按照你的方式，将onclick添加到每个<a>：

<a href='#' onclick='removeThisFilter()'> </a>

或者试试这个方法：

// event handle remove tag
insertNode.delegate('a', 'click', function () {
    $(this).remove();
})