我正在從 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>我在我的js文件中引用上述組件中的div，如下所示let currencyMap = jQuery("#currency-map");當(dāng)我的 jQuery 文檔準(zhǔn)備好時，我正在執(zhí)行以下操作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>`) }});}我的功能是這樣的function onCurrencyClick(val){ console.log("val",val); setCookie("booking_currency", val, 14);}這里該功能不起作用。但是，如果我不向該函數(shù)傳遞任何內(nèi)容，它似乎可以工作，因為我可以在終端中看到日志。
3 回答
長風(fēng)秋雁
TA貢獻1757條經(jīng)驗 獲得超7個贊
您好，您的表達式 ${data[c].abbreviation} 會將值放入不帶字符串引號的函數(shù)字符串中，即結(jié)果將是 onCurrencyClick(abbreviation) 而它應(yīng)該是 < a i=2>. 請使用 onclick="onCurrencyClick("${data[c].abbreviation}")"相反。onCurrencyClick('abbreviation')
慕俠2389804
TA貢獻1719條經(jīng)驗 獲得超6個贊
不要使用內(nèi)聯(lián)onclick，而是使用事件委托。這意味著您有一個事件偵聽器來處理來自子代和孫代的所有事件。修改是一個非常小的修改，請參見下面的示例。
這樣做的原因是您將 JavaScript 保存在 JS 文件中。就像現(xiàn)在一樣，您遇到了 JS 錯誤，并且必須在 HTML 中查找它。這可能會變得非?；靵y。然而內(nèi)聯(lián) onclick 監(jiān)聽器也是有效的，但它們已經(jīng)過時了，應(yīng)該避免，除非絕對沒有其他方法。與 CSS 中使用 !important 進行比較，效果相同。
function onCurrencyClick(event){
var val = $(this).val();
setCookie("booking_currency", val, 14);
}
currencyMap.on('click', '.currency-item', onCurrencyClick);
此示例采用您嘗試從單擊的 的 屬性插入的 val。 元素沒有這樣的屬性，但是 有這樣的屬性，并且是一個更適合它期望與之交互的元素。將可點擊元素用于點擊等目的通常是一個很好的做法。 value.current-item<span><button>
在下面的示例中，您會看到正在使用的按鈕以及在 屬性中輸出的 abbreviation 值3> 元素，可以從 函數(shù)中讀取。value<button>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>
`)
}
});
函數(shù)式編程
TA貢獻1807條經(jīng)驗 獲得超9個贊
onclick不適用于動態(tài)添加的 div 標(biāo)簽
你應(yīng)該關(guān)注 jQuery?on?事件
- 3 回答
- 0 關(guān)注
- 220 瀏覽
添加回答
舉報
0/150
提交
取消