我正在尝试迭代表中的价格并根据下拉列表中所选的货币更新货币。
我需要能够动态更新价格，允许用户在不同货币之间进行更改。我正在使用 openexchangerates api 通过 ajax 获取费率。在我的示例代码中，有硬编码的费率。
到目前为止，我已经能够获取价格字段并将它们放入一个数组中，同时从每个字段中删除 $。
我目前遇到的问题是创建一个监听器等待您选择一种货币，然后迭代表执行值(value) * 比率的数学运算并相应地更新 dom。
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
rates = {
"USD" : 1,
"AED" : 3.673175,
"AFN" : 76.179633,
"ALL" : 110.13,
"AMD" : 485.74,
"ANG" : 1.775607,
"AOA" : 310.2935,
"ARS" : 36.069,
"AUD" : 1.376456,
"AWG" : 1.799996,
"AZN" : 1.7025,
"BAM" : 1.729353,
"BBD" : 2,
"BDT" : 83.8945,
"BGN" : 1.72884,
"BHD" : 0.376971,
"BIF" : 1815,
"BMD" : 1,
"BND" : 1.378901,
"BOB" : 6.912312,
"BRL" : 3.784384,
"BSD" : 1,
"BTC" : 0.00018094797,
"BTN" : 72.002497,
"BWP" : 10.721978,
"BYN" : 2.137615,
"BZD" : 2.016384,
"CAD" : 1.320264,
"CDF" : 1610,
"CHF" : 1.006336,
"CLF" : 0.02338,
"CLP" : 675.607203,
"CNH" : 6.930934,
"CNY" : 6.9391,
"COP" : 3202.248993,
"CRC" : 616.218201,
"CUC" : 1,
"CUP" : 25.75,
"CVE" : 97.8215,
"CZK" : 22.976724,
"DJF" : 178.025,
"DKK" : 6.594392,
"DOP" : 50.2875,
"DZD" : 118.539475,
"EGP" : 17.9127,
"ERN" : 14.997335,
"ETB" : 28.06,
"EUR" : 0.883768,
"FJD" : 2.11954,
"FKP" : 0.784484,
"GBP" : 0.784484,
"GEL" : 2.44699,
"GGP" : 0.784484,
"GHS" : 4.9025,
"GIP" : 0.784484,
"GMD" : 49.605,
"GNF" : 9172.5,
"GTQ" : 7.717685,
"GYD" : 209.12595,
"HKD" : 7.83065,
"HNL" : 24.249947,
"HRK" : 6.564,
"HTG" : 72.624237,
"HUF" : 284.532245,
"IDR" : 14644.12,
"ILS" : 3.71235,
"IMP" : 0.784484,
"INR" : 71.854713,
"IQD" : 1190,
"IRR" : 42494.748754,
"ISK" : 124.050098,
"JEP" : 0.784484,
"JMD" : 126.240223,
"JOD" : 0.709503,
"JPY" : 113.3619,
"KES" : 103.2,
"KGS" : 68.708054,
"KHR" : 4046,
"KMF" : 435.45,
"KPW" : 900,
"KRW" : 1128.713333,
"KWD" : 0.304296,
"KYD" : 0.833659,
"KZT" : 374.14,
"LAK" : 8550,
"LBP" : 1510.95,
"LKR" : 176.56,
"LRD" : 158.125055,
"LSL" : 14.23,
"LYD" : 1.4,
"MAD" : 9.527069,
"MDL" : 17.082435,
"MGA" : 3615,
"MKD" : 54.37022,
"MMK" : 1606.541171,
"MNT" : 2489.82399,
"MOP" : 8.069676,
"MRO" : 357,
"MRU" : 36.65,
"MUR" : 34.75,
"MVR" : 15.450044,
"MWK" : 727.424567,
"MXN" : 20.28933,
"MYR" : 4.181565,
"MZN" : 60.910134,
"NAD" : 14.405,
"NGN" : 363.5,
"NIO" : 32.3,
"NOK" : 8.49588,
"NPR" : 115.204717,
"NZD" : 1.465876,
"OMR" : 0.385009,
"PAB" : 1,
"PEN" : 3.385485,
"PGK" : 3.37,
"PHP" : 52.6155,
"PKR" : 134.125,
"PLN" : 3.787961,
"PYG" : 5934.276918,
"QAR" : 3.6411,
"RON" : 4.119803,
"RSD" : 104.449561,
"RUB" : 66.479983,
"RWF" : 883,
"SAR" : 3.7522,
"SBD" : 7.996142,
"SCR" : 13.670428,
"SDG" : 47.8,
"SEK" : 9.071083,
"SGD" : 1.376287,
"SHP" : 0.784484,
"SLL" : 8390,
"SOS" : 580,
"SRD" : 7.458,
"SSP" : 130.2634,
"STD" : 21050.59961,
"STN" : 21.7,
"SVC" : 8.753924,
"SYP" : 514.986689,
"SZL" : 14.315,
"THB" : 32.95025,
"TJS" : 9.427651,
"TMT" : 3.499986,
"TND" : 2.913297,
"TOP" : 2.293926,
"TRY" : 5.348061,
"TTD" : 6.74235,
"TWD" : 30.83095,
"TZS" : 2300.706946,
"UAH" : 27.955,
"UGX" : 3736.093939,
"USD" : 1,
"UYU" : 32.649925,
"UZS" : 8287.5,
"VEF" : 248571.35,
"VES" : 65.276342,
"VND" : 23238.330172,
"VUV" : 111.062842,
"WST" : 2.601349,
"XAF" : 579.714109,
"XAG" : 0.07028903,
"XAU" : 0.0008241,
"XCD" : 2.70285,
"XDR" : 0.720007,
"XOF" : 579.714109,
"XPD" : 0.00086581,
"XPF" : 105.46163,
"XPT" : 0.00119123,
"YER" : 250.300682,
"ZAR" : 14.248258,
"ZMW" : 11.854,
"ZWL" : 322.355011,
};
</script>';
</head>
<body>
<div> Please select a currency type:
<select id="selector" name="currencies">
<option value="ANG" title="Netherlands Antillean Guilder">ANG</option>
<option value="GBP" title="British Pound Sterling">GBP</option>
<option value="CAD" title="Canadian Dollar">CAD</option>
<option value="CNY" title="Chinese Yuan">CNY</option>
<option value="EUR" title="Euro">EUR</option>
<option value="HKD" title="Hong Kong Dollar">HKD</option>
<option value="ILS" title="Israeli New Sheqel">ILS</option>
<option value="INR" title="Indian Rupee">INR</option>
<option value="JPY" title="Japanese Yen">JPY</option>
<option value="KRW" title="South Korean Won">KRW</option>
</select>
</div>
<p id="output"></p>
<div class="cj-mt-30">
<h3 class="cj-title cj-mb-20 cj-fs-20 cj-color-black-ter" style="width: 80%">
Compare and get the best deal
<div id="#a001" class="cj-bd-bottom cj-mt-5">
</div>
</h3>
<table class="cj-table cj-text-center" style="width: 80%">
<thead>
<tr>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_limit,h_47,w_83/v1541100411/stox_qeleyf.png">
</a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801"
title=""><img style="vertical-align: middle" src="https://res.cloudinary.com/rhe305/image/upload/c_scale,h_39,w_66/v1541079455/flightclub_qnub4v.png"></a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_scale,h_39/v1541032916/Screen_Shot_2018-10-31_at_8.41.23_PM_rtfl9f.png"></a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_scale,w_39/e_colorize,co_black/v1541033195/logoUN_m6ehto.png">
</a>
</th>
</tr>
</thead>
<tbody id="mytab">
<tr>
<td class="cj-has-text-centered">
4 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$262</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$300</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$305</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$320</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
4.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$275</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$335</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$369</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$349</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$265</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$300</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$380</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$314</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
5.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$274</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$330</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$350</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$314</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
6 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$280</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$330</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$345</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$340</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
6.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$285</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$350</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$350</a> </td>
<td class="cj-has-text-centered highest">
- </td>
</tr>
<tr>
<td class="cj-has-text-centered">
7 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$240</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$615</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$295</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$329</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
7.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$240</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$270</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$295</a> </td>
<td class="cj-has-text-centered highest">
- </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
jQuery(document).ready(function (t) {
t("tr").each(function () {
var e = t("td:not(:first-child)", this).map(function () {
return parseInt(t(this).text().replace("$", ""), 10) ? parseInt(t(this).text().replace("$", ""), 10) : null
}).get();
console.log(e);
});
});
</script>
最佳答案
只需执行相同(或相反)即可
jQuery(document).ready(function (t) {
只是
jQuery('#selector').change(function (t) {
// and so on....
关于javascript - 迭代表更新每个单元格的货币 javascript/Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53343890/