Put value from label to another container and wrap it in a span and div at the same time

nion 0
Viewed 24

There is this markup:

<div class="product-list-wrapper">

  <div class="exposed-wrapper">
    <details class="js-form-wrapper">
      <div class="form-item">
        <label>Crew Neck T-Shirts</label>
      </div>
    </details>
    
    <details class="js-form-wrapper">
      <div class="form-item">
        <label>V-Neck T-Shirts</label>
      </div>
    </details>
  </div>
  
  <div class="rows-wrapper">
    <div class="tags-buttons-wrapper">
      <div class="tags-container"></div>
    </div>
  </div>

</div>

A task:

  1. When clicking on the <label> with the value Crew Neck T-Shirts, must be created <div> with the tag-label class in tags-containers and must be created two <span> in tag-label div, where the second one will have the close-btn class.

  2. On the same click, put the Crew Neck T-Shirts value in the first <span> of the one without the class.

And when I click on the <label> with the value V-Neck T-Shirts, I need to do the same.

As a result, there should be two tag-label containers in tags-container like this:

<div class="tags-container">
   <div class="tag-label">
      <span>Crew Neck T-Shirts</span>
      <span class="close-btn"></span>
   </div>
     <div class="tag-label">
      <span>V-Neck T-Shirts</span>
      <span class="close-btn"></span>
   </div>
</div>

To do this, I wrote the following jquery code:

jQuery(document).ready(function () {
  $(".product-list-wrapper .js-form-wrapper .form-item label").on('click', function() {
    $(".product-list-wrapper .rows-wrapper .tags-container").append('<div class="tag-label"><span></span><span class="close-btn"></span></div>');
    $('.product-list-wrapper .rows-wrapper .tags-container span').val('WWW');
  });

The problem is that it does not work, and besides, I am passing here just a random text 'WWW' and I need to transfer the value from the labels.

Also, I wrote this code in sandbox:
https://jsfiddle.net/petroyarmolenko/x17sn43q/21/

Visually, what I do should look like this:

enter image description here

jquery
1 Answers

Your Fiddle is not working because you have to select the jQuery framework in the javascript pane. Click on "JavaScript + No-Library (pure JS)" in the pane where your javascript code is written, then select jQuery in the framework dropdown. Then your code would run.

To get 'the value' of the label, you would get the 'text' of the element in your click handler: $(this).text() In your fiddle, to set the span to display 'WWW' you also would have to use the text() function like so: $('.product-list-wrapper .rows-wrapper .tags-container span').text('WWW');

To create a new tag element I wrote it like this (really don't know if this is the best way) and added a class to the span which should hold the text of the menu item:

let $tag = $('<div>').append('<div class="tag-label"><span class="tag-text"></span><span class="close-btn"></span></div').children().first();

A fork of your fiddle: https://jsfiddle.net/x78rnLu0/

Now you should write your own logic and code to prevent duplicate .tag-label :)

Piemol0
Related