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

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>的文本并插入特定的link。

这意味着如果我单击 <label 1>，复制此 <label> 的文本并使用该文本创建一个 link 如果我单击 <label 2> 把这个< label> 的文字复制到另外一个link.

我放了代码的例子，因为它正在运行

<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，它会添加带有文本的 link，但如果我另外点击标签 2，它会添加文本但在同一个初始link。需要在同一个 <div> 中单独的 link 中，结果是这样的：

<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

好吧，不确定这是否是您想要的，但我简化了您的代码，使您不能两次添加相同的 link 并添加了一种删除 links 也是如此。此外，由于您将其标记为 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();
})

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

Insert node with the text of the clicked label

html

javascript

jquery

e-commerce