将单击的checkBoxes文本添加到父span中

Question

当有人单击复选框时，我希望从他们单击的类别下面的范围中添加或删除文本。

<div class="trigger">Artist</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="Offset">
      <label class="label">Offset
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="takeOff">
      <label class="label">takeOff
      </label>
    </div>
  </li>
</ul>
<div class="trigger">Album</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="culture">
      <label class="label">culture
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="culture2">
      <label class="label">culture2
      </label>
    </div>
  </li>
</ul>

import * as $ from 'jquery';
let text;

$('.refinement').on('click', function(event) {
    text= event.target.getAttribute('name')
    console.log(text)
});

到目前为止，我已经知道了如何获取文本，但我需要帮助解决如何将其附加到上面的父跨度。

Answer 1

请参见注释内联(fyi:您没有正确地使用label元素)：

​

let text;

$('.refinement').on('click', function(event) {   
    // Find the ancestor UL that begins the list and then
    // get the sibling just prior to it. Also, "this" will
    // access the object that the event handler was set on
    // and you can get attributes of it via direct properties.
    this.closest("ul.filters").previousSibling.textContent = this.name;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trigger">Artist</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <label class="label">
        <!-- Labels must either use the "for" attribute to
             associate themselves with an element by its ID or
             they should contain the element they are for.
             This provides the appropriate accessibility as you can
             then click on the label or the control to activate the event.
        -->
        <input class = "refinement" type="checkbox" name="Offset">Offset
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <label class="label">
        <input class = "refinement" type="checkbox" name="takeOff">
        takeOff
      </label>
    </div>
  </li>
</ul>
<div class="trigger">Album</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <label class="label">
      <input class = "refinement" type="checkbox" name="culture">culture
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <label class="label">
            <input class = "refinement" type="checkbox" name="culture2">culture2
      </label>
    </div>
  </li>
</ul>

​

Answer 2

我不确定我完全理解你想要正确实现的目标，但这是为了替换下面的文本：

$('.refinement').on('click', function(event) {
    newText="";
    $(event.target).parent().find(".label").html(newText)
});

这是要复制复选框下面的文本。

$('.refinement').on('click', function(event) {
    oldText=$(event.target).parent().find(".label").html()
    $(event.target).parent().find(".first-span").remove()
    $(event.target).parent().prepend("<span class='first-span'>"+oldText+"</span>")
});

Answer 3

你可以试试：

​

// listener on checkbox with class "refinement"
$('.refinement').on('change', function() {
  // getting checkbox name
  const checkboxName = $(this).attr('name')

  // getting span element over his ul parent
  const $spanAssigned = $(this).closest('ul').prev()
  
  // if checkbox is checked append template with checkboxName
  // inside of $spanAssigned element
  if ($(this).is(':checked')) {
    const template = `<span>${checkboxName} <span>`
    
    $spanAssigned.append(template)
  } 
  // if checkbox isn't checked find & remove from $spanAssigned element
  else {
    $spanAssigned.find(`span:contains(${checkboxName})`).remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trigger">Artist</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="Offset">
      <label class="label">Offset
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="takeOff">
      <label class="label">takeOff
      </label>
    </div>
  </li>
</ul>
<div class="trigger">Album</div>
<span class="refinements"></span>
<ul class="filters">
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="culture">
      <label class="label">culture
      </label>
    </div>
  </li>
  <li class="items">
    <div class = "checkBox">
      <input class = "refinement" type="checkbox" name="culture2">
      <label class="label">culture2
      </label>
    </div>
  </li>
</ul>

​