在多个 div 上打印自定义属性的值答案

【问题标题】：Printing value of custom attributes on multiple divs在多个 div 上打印自定义属性的值
【发布时间】：2022-11-18 22:53:53
【问题描述】：

我正在一家 Shopify 商店工作，那里有多个 div，如下所示：

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="One"></div>

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Two">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Three">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Four">

我想获取自定义属性data-variant-option-chosen-value的值并将其打印到<span class="selected-variant"></span>

我尝试通过遵循 jQuery 来读取自定义属性值，但没有成功

$(document).ready(function() {
$('.options-selection__option-values').each(function() {
  console.log($(this).attr('data-variant-option-chosen-value'));
});

【问题讨论】：

您在浏览器控制台中有错误吗？您提供的 sn-p 不完整，但可能正是您将其添加到问题中的方式。理想情况下，添加一个完全的sn-p 到哪个问题演示问题。您的代码，如所提供的，添加了明显的缺失位，工作正常：jsfiddle.net/avj3f7ug

标签： html jquery css

【解决方案1】：

它工作得很好，你只是有语法错误，你在最后缺少“})”并且它抛出错误Uncaught SyntaxError: Unexpected end of input"

截至目前，您既没有关闭匿名回调函数，也没有关闭就绪函数。

$(document).ready(function() {

$('.options-selection__option-values').each(function() {
  console.log($(this).attr('data-variant-option-chosen-value'));
});
})

【讨论】：

【解决方案2】：

使用$(this).attr("data-variant-option-chosen-value")获取属性值，连接它，将它设置为所需的目标。

您的模板和脚本也有一些错误。 div 缺少结束标记，$(document).ready(function () { 缺少 cloaing 标记

$(document).ready(function () {
  let val = ''
  $(".options-selection__option-values").each(function () {
    val += $(this).attr("data-variant-option-chosen-value");
  });
  $(".selected-variant").text(val)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="selected-variant"></span>
<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="One"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Two"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Three"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Four"
></div>

【讨论】：