jQuery - trying to get data-name value ( string )-CodePudding

HTML:

  <ul>
    <li id="bapf_2_287_label">
      <input data-name="curry" id="bapf_2_287" type="checkbox" value="287" style="display:none;">
      <label for="bapf_2_287" aria-label="curry" class="awa" style="background-image: url("https://website/wp-content/uploads/2021/10/undefined.jpg");">
        <span class="bapf_img_span h2em w2em" style="background: url(https://website/wp-content/uploads/2021/10/curry.jpg) no-repeat scroll 50% 50% rgba(0, 0, 0, 0);background-size: cover;">
          <span class="bapf_clr_span_abslt"></span>
        </span>
      </label>
    </li>
    <li id="bapf_2_286_label">
      <input data-name="darkgrey" id="bapf_2_286" type="checkbox" value="286" style="display:none;">
      <label for="bapf_2_286" aria-label="darkgrey" class="awa" style="background-image: url("https://website/wp-content/uploads/2021/10/undefined.jpg");">
        <span class="bapf_img_span h2em w2em" style="background: url() no-repeat scroll 50% 50% rgba(0, 0, 0, 0);background-size: cover;">
          <span class="bapf_clr_span_abslt"></span>
        </span>
      </label>
    </li>
  </ul>
</div>

jQuery

           var getCol = jQuery("input").data('data-name');
           var imageUrl = "https://website/wp-content/uploads/2021/10/"   getCol   ".jpg";
          jQuery(".bapf_sfilter .bapf_img_span").css('background-image', 'url("'   imageUrl   '")');

I am trying to add the value of the data-name to the URL to display a swatch image. It keeps showing the URL but with 'undefined' at the end.

This will need to be a loop, but I wish to get the functionality of it working first. There will be many colour image swatches.

CodePudding user response：

var getCol = jQuery("input").data('data-name');

should be:

var getCol = jQuery("input").data('name');

when you specify it in html it will be data-name="something"

ex: <div id="dataTag" data-name="something">

but when you use the jQuery method to read a data attribute you need to specify just the name

$('#dataTag').data('name')

$(function(){
  $('ul > li').each(function() {
     var getCol = $('input', $(this)).data('name');
     var imageUrl = "https://website/wp-content/uploads/2021/10/"   getCol   ".jpg";
    $(".bapf_img_span", $(this)).css('background-image', 'url("'   imageUrl   '")');
    console.log('CSS background-image =', $(".bapf_img_span", $(this)).css('background-image'));  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li id="bapf_2_287_label">
      <input data-name="curry" id="bapf_2_287" type="checkbox" value="287" style="display:none;">
      <label for="bapf_2_287" aria-label="curry" class="awa" style="background-image: url("https://website/wp-content/uploads/2021/10/undefined.jpg");">
        <span class="bapf_img_span h2em w2em" style="background: url(https://website/wp-content/uploads/2021/10/curry.jpg) no-repeat scroll 50% 50% rgba(0, 0, 0, 0);background-size: cover;">
          <span class="bapf_clr_span_abslt"></span>
        </span>
      </label>
    </li>
    <li id="bapf_2_286_label">
      <input data-name="darkgrey" id="bapf_2_286" type="checkbox" value="286" style="display:none;">
      <label for="bapf_2_286" aria-label="darkgrey" class="awa" style="background-image: url("https://website/wp-content/uploads/2021/10/undefined.jpg");">
        <span class="bapf_img_span h2em w2em" style="background: url() no-repeat scroll 50% 50% rgba(0, 0, 0, 0);background-size: cover;">
          <span class="bapf_clr_span_abslt"></span>
        </span>
      </label>
    </li>
  </ul>
</div>