我有一個<p>從我的 PHP 腳本生成的標簽串列。它們中的每一個都有一個值，例如“30”或“5”（<p>30</p>）。我有一個包含一些值的選擇串列。通過選擇它們，您可以乘以每個<p>標簽的值。問題是當我乘以<p>10</p>2 時，我得到 20。當我再次將它乘以 3 時，我得到的不是 30，而是 60。我知道 js 采用<p>此刻標簽中的值執行該功能，但我不知道如何使其僅采用基本（頁面加載）值。
function multiply() {
$('.tags p').each(function() {
let multiply_val = document.querySelector(".multiply_ing").value;
let ing = parseFloat(this.innerHTML);
this.innerHTML = ing * multiply_val;
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="multiply">
<select class="multiply_ing" onchange="multiply()">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="2">2x</option>
<option value="3">3x</option>
</select>
</div>
<div class="tags">
<p>10</p>
<p>5</p>
<p>2</p>
</div>uj5u.com熱心網友回復：
我建議你使用資料屬性。
還要使用外部事件處理程式并確保您的類出現在標簽上（您錯過了ingredient）
您也可以觸發更改，因此初始化內容的是 select 的值：
$(function() {
$(".multiply_ing").on("change", function() {
let multiply_val = this.value;
$('.ingredient p').each(function() {
let ing = this.dataset.val;
this.innerHTML = ing * multiply_val;
});
}).change(); // initialise
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="multiply">
<select class="multiply_ing">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="2">2x</option>
<option value="3">3x</option>
</select>
</div>
<div class="tags ingredient">
<p data-val="10"></p>
<p data-val="5"></p>
<p data-val="2"></p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504997.html
下一篇：僅當它以前存在時才再次添加類