jQuery-試圖獲取資料名稱值（字串）

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   '")');

上面是我的代碼。我正在嘗試將 data-name 的值添加到我的 URL 以顯示樣本影像。它一直顯示網址，但最后是“未定義”。

有人可以幫忙嗎？

這將需要是一個回圈，但我只是想讓它的功能首先作業。將有許多彩色影像樣本。

uj5u.com熱心網友回復：

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

應該：

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

當您在 html 中指定它時，它將是 data-name="something"

前任： <div id="dataTag" data-name="something">

但是當您使用 jQuery 方法讀取資料屬性時，您只需要指定名稱

$('#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>

標籤：查询

上一篇：懸停事件完美運行后jquery點擊不起作用

下一篇：將資訊從AJAX傳遞到控制器類