JavaScript使用一個id對不同部分執行不同的操作

我正在制作一個串列，其中列出了具有不同值的不同部分，我想只使用一個 id 來更改這些部分的文本。
這些部分被命名為每月、每年、每半年和每三年一次。每月部分的價值為“4 美元”，其他部分的價值為“免費”。
這些部分應在單擊其單選按鈕時提供文本更改操作。
這是我嘗試過的代碼：

var radio = document.getElementById("rd1");
function radio() {
  document.getElementById("dollar").innerText = "Rs : 1150";
}

var radio2 = document.getElementById("rd2");
$(radio2).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio3 = document.getElementById("rd3");
$(radio3).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

var radio4 = document.getElementById("rd4");
$(radio4).on("click", function (e) {
  document.getElementById("dollar").innerText = "Free";
});

<input id="rd1" type="radio" name="Price" checked onclick="radio()" />
<label for="rd1">Monthly</label>
<input id="rd2" type="radio" name="Price" />
<label for="rd2">Annually</label>
<input id="rd3" type="radio" name="Price" />
<label for="rd3">Biannually</label>
<input id="rd4" type="radio" name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
</div>

在這段代碼中，我想要一些東西：

• 1：每月價格應該是默認的，并且具有數字“1125”的資料型別

• 2：其他價格將不是默認值，將是一個字串值“免費”

• 3：它們也有一個總數，其中將添加一個以上的值，而自由值將等于 0，因此不會與其他值相加

我正在嘗試像 24 小時一樣的一整天，但我做不到。我希望你能幫助我:) <3

uj5u.com熱心網友回復：

這是您希望達到的結果嗎？代碼中有一些注釋試圖澄清每個階段發生的事情，我認為它回答了第 1-3 點，但在第 3 點上并不完全確定......希望它有所幫助

// find DOM elements of interest.
let span_number=document.querySelector('.console #number');
let span_icon=document.querySelector('.console #icon');
let tot=document.querySelector('.console #total');

// find the default checked input - this will help populate the "console" items
let def=document.querySelector('input[name="Price"]:checked');

// listen for change events using a delegated listener and process if it originates from RADIO button.
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
    // use the event.target property to identify the element and
    // thus access the dataset attributes and element value.
    span_number.textContent=e.target.dataset.value;
    span_icon.textContent=e.target.dataset.unit || '';
    tot.dataset.value=e.target.value;
  }
});

// at pageload, set the display in the "console" element.
span_number.textContent=def.dataset.value;
span_icon.textContent=def.dataset.unit || '';
tot.dataset.value=def.dataset.value;

#total{color:grey}
#total:before{
  content:attr(id)':';
  margin-right:0.25rem
}
#total:after{
  content:attr(data-value);
}

<!--
  inputs assign a value in accordance with question
  dataset attributes added to provide details cited in question when radio button is checked.
  the "default" - Monthly radio is selected by default as per point #1
  added #total as part of point #3 
-->
<input id="rd1" type="radio" value=1125 data-unit='RS' data-value='1125' name="Price" checked />
<label for="rd1">Monthly</label>

<input id="rd2" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd2">Annually</label>

<input id="rd3" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd3">Biannually</label>

<input id="rd4" type="radio" value=0 data-value='Free' name="Price" />
<label for="rd4">Triennially</label>

<div class="console">
  <h1 id="dollar">
    <span id="icon"></span>
    <span id="number"></span>
  </h1>
  <span id='total'></span>
</div>

標籤：javascripthtmljQuery功能

上一篇：執行回圈直到滿足條件

下一篇：無法在customTableViewCell中設定imageView的影像