javascript - 关于更改表值的 jQuery

Question

我正在学习 jQuery 并想更改表 td 中的值。我有以下代码:

$(document).ready(function() {
  $('#s1').on('change', function() {
    $("#lev1,#lev2,#lev3,#lev4,#lev5").text(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="s1">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">30</option>
  <option value="90">40</option>
</select>

<table class="table">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>Level 5</td>
      <td id="lev5">2000</td>
    </tr>
    <tr>
      <td>Level 4</td>
      <td id="lev4">1000</td>
    </tr>
    <tr>
      <td>Level 3</td>
      <td id="lev3">500</td>
    </tr>
    <tr>
      <td>Level 2</td>
      <td id="lev2">200</td>
    </tr>
    <tr>
      <td>Level 1</td>
      <td id="lev1">100</td>
    </tr>
  </tbody>
</table>

我想将级别值显示为:

• 对于选项 10:var = [19,39,49,79,199]
• 对于选项 20:var = [39,49,79,199,239]
• 对于选项 50:var = [49,79,199,239,299]
• 对于选项 90:var = [79,199,239,299,399]

我该怎么做？我是新手，只学习了 jQuery 的基础知识。我所做的一些例子:http://www.w3schools.com/code/tryit.asp?filename=FCLNW59MAXD1

Answer 1

将数据保存在 json 对象中并使用 jQuery.text( function ) .

您也可以使用 Attribute Starts With Selector [name^=”value”]为了减少代码。

片段:

var r = {
  '10': [19, 39, 49, 79, 199],
  '20': [39, 49, 79, 199, 239],
  '50': [49, 79, 199, 239, 299],
  '90': [79, 199, 239, 299, 399]
};
$(document).ready(function () {
  $('#s1').on('change', function (e) {
    var v = $(this).val();
    $('[id^="lev"]').text(function (idx, text) {
      return r[v][idx];
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<table class="table" style="width:50%;background:#E5B794;color:#111;text-align:center;border-radius:12px;padding:10px;">
    <tbody>
    <tr>
        <td>Level 5</td>
        <td id="lev5">2000</td>
    </tr>
    <tr>
        <td>Level 4</td>
        <td id="lev4">1000</td>
    </tr>
    <tr>
        <td>Level 3</td>
        <td id="lev3">500</td>
    </tr>
    <tr>
        <td>Level 2</td>
        <td id="lev2">200</td>
    </tr>
    <tr>
        <td>Level 1</td>
        <td id="lev1">100</td>
    </tr>
    </tbody>
</table>
<br>
<select id="s1" style="width:48%;border-radius:12px;background:#E5B794;color:#111;">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">30</option>
    <option value="90">40</option>
</select>