Добавление кликаемого по тексту флажка в родительский диапазон

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

Как я понял вашу проблему, так и попытался решить вашу проблему. URL моего демо-кода указан ниже:

HTML-код

<div class="abc">
<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>
<hr/>
<div class="abc">
<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>
</div>

Код Jabascript:

$(document).ready(function(){
  $(document).on('click','.refinement',function(){
    var p = $(this).parents('.abc').first();
    if($(this).is(':checked')){
      p.find('.refinements').text($(this).attr('name'));
    } else {
      p.find('.refinements').text('');
    }
  })
});

Пожалуйстапопробуйте это.

Спасибо

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>

Answer 4

См. Встроенные комментарии (к вашему сведению: вы неправильно используете элемент 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>