Javascript 在for循环内部时，向函数传递值不起作用

我从一个json文件映射货币，并将映射的货币呈现给一个组件。我有一个像这样的.php文件

<div class="currency-switch-container" id="currency_container">
    <span style="font-size:12px;font-weight:bold">All currencies</span>
    <div id="currency-map" style="margin-top:15px"></div>
</div>

function onCurrencyClick(val){
  console.log("val",val);
  setCookie("booking_currency", val, 14);
}

当jQuery文档准备好后，我将执行以下操作

jQuery(document).ready(function($) {
  $.getJSON('wp-content/themes/mundana/currency/currency.json', function(data) {
    for(let c in data){
      currencyMap.append(`<span onclick="onCurrencyClick(${data[c].abbreviation})"
      class="currency-item">
        <span>
           ${data[c].symbol}
        </span>
        <span>
          ${data[c].currency}
        </span>
      </span>`)
    }
});

}

---

这里的函数不起作用。但是，如果我不向函数传递任何内容，它似乎可以工作，因为我可以在终端中看到日志。

您好，您的表达式${data[c].缩写}将把值放入函数字符串中，而不带字符串引号，即结果将是

onCurrencyClick（缩写）

，而它应该是

oncurrencycliclick（'缩写'）

。

---

请改用onclick=“onCurrencyClick（“${data[c].缩写}”）。

Hi您的表达式${data[c].缩写}会将值放入不带字符串引号的函数字符串中，即结果将是

onCurrencyClick（缩写）

，而它应该是

oncurrencycliclick（'缩写'）

。

---

请改用onclick=“onCurrencyClick（'${data[c].缩写}'）。

onclick

对动态添加的div标记无效

您应该在事件中遵循jQuery

参考：

Stackoverflow请参阅：
onclick
不适用于动态添加的div标记

您应该在

事件中遵循jQuery

参考：

Stackoverflow请参阅：
使用事件委派，而不是使用内联
onclick
。这意味着您只有一个事件侦听器来处理来自子代和子代的所有事件。修改是一个非常小的修改，请参见下面的示例

这样做的一个原因是将JavaScript保存在JS文件中。就像现在一样，您遇到一个JS错误，必须在HTML中查找它。这可能会让人非常困惑。此外，内联
onclick
侦听器是有效的，它们已经过时，除非绝对没有其他方法，否则应该避免使用。将其与使用
进行比较！重要信息
在CSS中，这一点同样适用

function onCurrencyClick(event){
  var val = $(this).val();
  setCookie("booking_currency", val, 14);
}

currencyMap.on('click', '.currency-item', onCurrencyClick);

本例采用您尝试从单击的
当前项中的
值
属性插入的
val
元素没有这样的属性，但是
有这样的属性，并且是一个更合适的元素，因为它期望与之交互。通常，使用可单击元素进行单击等操作是一种很好的做法

在下面的示例中，您可以看到正在使用的按钮和在
元素的
value
属性中输出的
缩写词
值，并且可以从
onCurrencyClick
函数中读取

jQuery(document).ready(function($) {
  $.getJSON('wp-content/themes/mundana/currency/currency.json', function(data) {
    for(let c in data){
      currencyMap.append(`
        <button value="${data[c].abbreviation}" class="currency-item">
          <span>
            ${data[c].symbol}
          </span>
          <span>
            ${data[c].currency}
          </span>
        </button>
      `)
    }
});

jQuery（文档）.ready（函数（$）{
$.getJSON（'wp-content/themes/mundana/currency/currency.json'，函数（数据）{
for（让c输入数据）{
currencyMap.append(`
${data[c].symbol}
${data[c].货币}
`)
}
});
使用事件委派，而不是使用内联的
onclick
。这意味着您有一个单独的事件监听器来处理来自子代和子代的所有事件。修改非常小，请参见下面的示例

这样做的一个原因是您将JavaScript保存在JS文件中。就像现在一样，您遇到JS错误，必须在HTML中查找。这可能会让人非常困惑。此外，尽管内联
onclick
侦听器有效，但它们已经过时，除非绝对没有其他方法，否则应该避免使用。请将其与使用进行比较<代码>！重要
在CSS中，同样适用于此

function onCurrencyClick(event){
  var val = $(this).val();
  setCookie("booking_currency", val, 14);
}

currencyMap.on('click', '.currency-item', onCurrencyClick);

本例以您试图从单击的
中的
值
属性插入的
val
为例。当前项
元素没有这样的属性，但是
有这样的属性，并且是一个更适合于它预期与之交互的元素。通常使用clickable是一个好的实践用于单击等目的的元素

在下面的示例中，您可以看到正在使用的按钮和在
元素的
value
属性中输出的
缩写词
值，并且可以从
onCurrencyClick
函数中读取

jQuery(document).ready(function($) {
  $.getJSON('wp-content/themes/mundana/currency/currency.json', function(data) {
    for(let c in data){
      currencyMap.append(`
        <button value="${data[c].abbreviation}" class="currency-item">
          <span>
            ${data[c].symbol}
          </span>
          <span>
            ${data[c].currency}
          </span>
        </button>
      `)
    }
});

jQuery（文档）.ready（函数（$）{
$.getJSON（'wp-content/themes/mundana/currency/currency.json'，函数（数据）{
for（让c输入数据）{
currencyMap.append(`
${data[c].symbol}
${data[c].货币}
`)
}
});
数据[c]的值是多少？缩写词
？我猜这是一个字符串，你需要用引号括起来
数据[c]的值是多少？缩写词
？我猜这是一个字符串，你需要用引号括起来