Jquery On Click 表

Question

您好我正在尝试创建一个包含三列的表。一列带有文本，另外两列一列用于当前分数和理想分数。现在，当我尝试分别选择当前分数和理想分数时，我不能，因为我只能被迫单击一个。此外，目标是使当前分数一旦选择就显示在当前分数输入中，而理想分数一旦选择就显示在理想分数输入中。但是现在我可以点击的一个数字出现在两个输入上。我知道 jquery 有问题，我不知道是什么。什么是我的 jquery 阻止我获得我想要实现的功能？？？？？？$(document).ready(function() {  $(document).on("click", function(event) {    clickedHTML = event.target.innerHTML;    if ($.isNumeric(clickedHTML)) {      number = clickedHTML;      $("#gform_7 input.small:visible").val(number);      $("#current").removeClass("scorecard-clicked");      event.target.classList.add("scorecard-clicked");    }  })});$(document).ready(function() {  $(document).on("click", function(event) {    clickedHTML = event.target.innerHTML;    if ($.isNumeric(clickedHTML)) {      number = clickedHTML;      $("#gform_7 input.medium:visible").val(number);      $("#ideal").removeClass("scorecard-clicked");      event.target.classList.add("scorecard-clicked");    }  })});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>  <tr>    <td class="whiteBG">You do not have a well-thought out investment plan.  There is no specific plan to measure allocation, risk and performance.</td>    <td class="dkgray" id="current"><table >        <tr>          <td><p>1</p></td>        </tr>        <tr>          <td><p>2</p></td>        </tr>        <tr>          <td><p>3</p></td>        </tr>      </table></td><td class="dkgray" id="ideal"><table>        <tr>          <td><p>1</p></td>        </tr>        <tr>          <td><p>2</p></td>        </tr>        <tr>          <td><p>3</p></td>        </tr>      </table></td>  <tr>

Answer 1

将类赋予不同的元素，并将事件处理程序委托给这些类。

请注意，您不应在表格的每一行中重复相同的 ID，它们应该是唯一的。您应该改用类。

$(document).ready(function() {

  $(document).on("click", ".current", function(event) {

    var number = $(this).text();

    $("#input_7_2").val(number);

    $("#current").removeClass("scorecard-clicked");

    $(this).addClass("scorecard-clicked");

  });

  $(document).on("click", ".ideal", function(event) {

    var number = $(this).text();

    $("#input_7_70").val(number);

    $("#ideal").removeClass("scorecard-clicked");

    $(this).addClass("scorecard-clicked");

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td class="whiteBG">You do not have a well-thought out investment plan.  There is no specific plan to measure allocation, risk and performance.</td>

    <td class="dkgray" id="current"><table >

        <tr>

          <td><p class="current">1</p></td>

        </tr>

        <tr>

          <td><p class="current">2</p></td>

        </tr>

        <tr>

          <td><p class="current">3</p></td>

        </tr>

      </table></td>

<td class="dkgray" id="ideal"><table>

        <tr>

          <td><p class="ideal">1</p></td>

        </tr>

        <tr>

          <td><p class="ideal">2</p></td>

        </tr>

        <tr>

          <td><p class="ideal">3</p></td>

        </tr>

      </table></td>

  <tr>

    <td class="whiteBG">You have one or several advisors who manage your investments and have a process of tracking all together but there is no strategic plan.</td>

    <td class="ltgray" id="current"><table>

        <tr>

          <td><p class="current">4</p></td>

        </tr>

        <tr>

          <td><p class="current">5</p></td>

        </tr>

        <tr>

          <td><p class="current">6</p></td>

        </tr>

      </table></td>

<td class="ltgray" id="ideal"><table>

        <tr>

          <td><p class="ideal">4</p></td>

        </tr>

        <tr>

          <td><p class="ideal">5</p></td>

        </tr>

        <tr>

          <td><p class="ideal">6</p></td>

        </tr>

      </table></td>

  </tr>

  <tr>

    <td class="whiteBG">You have one or more trusted advisors who coordinate investments but do not have an investment policy statement, coordinated rebalancing or alternative asset oversight and coordination.</td>

    <td class="gold" id="current"><table>

        <tr>

          <td><p class="current">7</p></td>

        </tr>

        <tr>

          <td><p class="current">8</p></td>

        </tr>

        <tr>

          <td><p class="current">9</p></td>

        </tr>

      </table></td>

  <td class="gold" id="ideal"><table>

        <tr>

          <td><p class="ideal">7</p></td>

        </tr>

        <tr>

          <td><p class="ideal">8</p></td>

        </tr>

        <tr>

          <td><p class="ideal">9</p></td>

        </tr>

      </table></td>

  </tr>

  <tr>

    <td class="whiteBG">You have one trusted advisor (not necessarily your only investment advisor) with complete oversight of your investment policy statement, asset allocation plan, alternative asset class oversight and allocation/ rebalancing oversight.</td>

    <td class="ltgold" id="current"><table>

        <tr>

          <td><p class="current">10</p></td>

        </tr>

      </table></td>

<td class="ltgold" id="ideal"><table>

        <tr>

          <td><p class="ideal">10</p></td>

        </tr>

      </table></td>

  </tr>

</table>

<label class="gfield_label" for="input_7_2">ENTER CURRENT SCORE<span class="gfield_required">*</span></label>

<div class="ginput_container ginput_container_text"><input name="input_2" id="input_7_2" type="text" value="" class="small" aria-describedby="gfield_description_7_2" aria-required="true" aria-invalid="false"></div>

<label class="gfield_label" for="input_7_70">ENTER IDEAL SCORE<span class="gfield_required">*</span></label>

<div class="ginput_container ginput_container_text"><input name="input_70" id="input_7_70" type="text" value="" class="medium" aria-describedby="gfield_description_7_70" aria-required="true" aria-invalid="false"></div>