從收音機中獲取價值，如何優化它？

有沒有更好的方法來優化我的代碼并避免重復

let results1 = document.getElementById("results1");
let results2 = document.getElementById("results2");
let results3 = document.getElementById("results3");


results1.innerHTML = '50 %';
results2.innerHTML = '100 $';
results3.innerHTML = '150 $';

document.querySelector("div.btn-group").addEventListener("click", function(evt) {
  if (evt.target.type === "radio") {


    if (evt.target.value == 0) {

      console.log(evt.target.value)

      results1.innerHTML = '50 %';
      results2.innerHTML = '100 $';
      results3.innerHTML = '150 $';
    }
    if (evt.target.value == 1) {
      results1.innerHTML = '150 %';
      results2.innerHTML = '200 $';
      results3.innerHTML = '350 $';
    }
    if (evt.target.value == 2) {
      results1.innerHTML = '250 %';
      results2.innerHTML = '300 $';
      results3.innerHTML = '450 $';
    }
  }
});

Select your plan

<div class="btn-group border" data-toggle="buttons">
  <label id='RADIO' class="btn btn-light">
            <input type="radio" name="test" value="0" checked> weekly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="1"> monthly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="2"> yearly
        </label>
</div>

<table class="table mt-4">
  <tr>
    <th>Weekly</th>
    <th>Montly</th>
    <th>Yearly</th>
  </tr>
  <tr>
    <td><span id="results1"></span></td>
    <td><span id="results2"></span></td>
    <td><span id="results3"></span></td>
  </tr>
  <tr>
    <td>full access</td>
    <td>free support</td>
    <td>everything</td>
  </tr>

</table>

uj5u.com熱心網友回復：

您可以將值直接存盤在option元素內作為data-*屬性并在事件處理程式中讀取它們

let results1 = document.getElementById("results1");
let results2 = document.getElementById("results2");
let results3 = document.getElementById("results3");


results1.innerHTML = '50 %';
results2.innerHTML = '100 $';
results3.innerHTML = '150 $';

document.querySelector("div.btn-group").addEventListener("click", function(evt) {
  if (evt.target.type === "radio") {
      results1.innerHTML = evt.target.dataset.r1
      results2.innerHTML = evt.target.dataset.r2
      results3.innerHTML = evt.target.dataset.r3
  }
});

Select your plan

<div class="btn-group border" data-toggle="buttons">
  <label id='RADIO' class="btn btn-light">
            <input type="radio" name="test" value="0" checked data-r1="50 %" data-r2="100 $" data-r3="150 $"> weekly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="1" data-r1="150 %" data-r2="200 $" data-r3="350 $"> monthly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="2" data-r1="250 %" data-r2="300 $" data-r3="450 $"> yearly
        </label>
</div>

<table class="table mt-4">
  <tr>
    <th>Weekly</th>
    <th>Montly</th>
    <th>Yearly</th>
  </tr>
  <tr>
    <td><span id="results1"></span></td>
    <td><span id="results2"></span></td>
    <td><span id="results3"></span></td>
  </tr>
  <tr>
    <td>full access</td>
    <td>free support</td>
    <td>everything</td>
  </tr>

</table>

uj5u.com熱心網友回復：

有沒有更好的方法來優化我的代碼并避免重復

將有很多方法來整理/重構/優化您的代碼。

這里只是一個例子。

請研究它，如果您有任何問題，請在下面的評論中提問。

重構代碼的作業示例：

const buttons = document.querySelector('.btn-group');
let resultSpans = document.querySelectorAll('#results span');

let outputs = [
  ['50', '100', '150'],
  ['150', '200', '350'], 
  ['250', '300', '450']
];

const updateResults = (e) => {

  resultSpans.forEach((resultSpan, i) => {
  
    resultSpan.textContent = outputs[e.target.value][i]   ' ';
    resultSpan.textContent  = (i === 0) ? '%' : '$';
  });
};

buttons.addEventListener('change', updateResults);

Select your plan

<div class="btn-group border" data-toggle="buttons">
  <label id='RADIO' class="btn btn-light">
            <input type="radio" name="test" value="0" checked> weekly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="1"> monthly
        </label>
  <label class="btn btn-light">
            <input type="radio" name="test" value="2"> yearly
        </label>
</div>

<table class="table mt-4">
  <tr>
    <th>Weekly</th>
    <th>Monthly</th>
    <th>Yearly</th>
  </tr>
  <tr id="results">
    <td><span>50 %</span></td>
    <td><span>100 $</span></td>
    <td><span>150 $</span></td>
  </tr>
  <tr>
    <td>full access</td>
    <td>free support</td>
    <td>everything</td>
  </tr>

</table>

標籤：javascript

上一篇：Chart.js/Ng-charts堆積條形圖-在條形圖上顯示百分比，但在工具提示上顯示實際值

下一篇：如何突出顯示用戶在javascript中查看的當前部分？