获取数据后 javascript 将停止工作

Question

您好，我正在尝试从输入选项和文本字段中获取数据并插入到表格中。

我是用 javascript 和 jquery 完成的，但是在向表中插入数据后，执行 dataSend 函数后，我的 javascript 将停止工作。

$(document).ready(function() {
  //variables
  var status = $(".status");
  var comment = $(".comments");
  var questionsVal;
  var statusVal = "test";
  var commentsVal = "test2";

  function dataSend() {
    var inputText = jQuery('input[type="text"]');
    var inputRadio = jQuery('input[type="radio"]');
    var i = -1;
    var i2 = -1;
    while (i < inputText.length - 1) {
      i++;
      comment[i].innerHTML = inputText.eq(i).val();
    }
    console.log("test1");
    while (i2 < inputRadio.length - 1) {
      i2++;
      status[i2].innerHTML = inputRadio.eq(i2).val();
    }
    console.log("test2");
  }

  jQuery("#dataSend").click(function() {
    dataSend();
    console.log("ok");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="dataExport">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Questions</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>First question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
      <tr>
        <th>2</th>
        <td>Second question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
      <tr>
        <th>3</th>
        <td>Third question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
    </tbody>
  </table>
</div>

<div id="questions">
  <div>
    <h4>First question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question1" value="ok" checked="checked"> Ok<br>
      <input type="radio" name="question1" value="error"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment1" value="Comment1">
    </form>
  </div>
  <div>
    <h4>Second question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question2" value="ok"> Ok<br>
      <input type="radio" name="question2" value="error" checked="checked"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment2" value="Comment2">
    </form>
  </div>
  <div>
    <h4>Third question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question3" value="ok" checked="checked"> Ok<br>
      <input type="radio" name="question3" value="error"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment3" value="Comment3">
    </form>
  </div>
  <div id="buttons">
    <button id="dataSend">Send data to table</button>
  </div>
</div>

在我的代码中，你可以看到控制台 test1、test2，ok。

我无法得到 test2 和好的。

你可以在 codepen 中看到这个：https://codepen.io/soorta/pen/gOYLpYq?editors=1111

感谢您的帮助。

Answer 1

这里的主要问题是您的单选输入元素比状态元素多，这将导致在迭代每个单选元素以更新相应的.status 元素时出现问题。

考虑更新这一行以选择那些为:checked 的单选输入元素，以确保每个状态元素有一个单选元素：

var inputRadio = jQuery('input[type="radio"]:checked');

您的脚本需要考虑的其他一些建议是：

• 在更新元素时​​，不要像[i] 那样访问jquery 选择的结果，而是考虑使用.eq(i) 方法，就像从输入元素访问数据一样（即comment.eq(i). 和status.eq(i2)）
• 您可以通过.text()（即comment.eq(i).text("content");）设置元素的文本内容，而不是设置所选jquery元素的innerHTML
• 从按钮单击处理程序返回 false 以防止按钮单击调用页面重新加载

这是一个工作示例：

$(document).ready(function() {
  //variables
  var status = $(".status");
  var comment = $(".comments");
  var questionsVal;
  var statusVal = "test";
  var commentsVal = "test2";

  function dataSend() {
    var inputText = jQuery('input[type="text"]');
    var inputRadio = jQuery('input[type="radio"]:checked');
    var i = -1;
    var i2 = -1;
    while (i < inputText.length - 1) {
      i++;
      comment.eq(i).text(inputText.eq(i).val());
    }
    console.log("test1");
    while (i2 < inputRadio.length - 1) {
      i2++;
      status.eq(i2).text(inputRadio.eq(i2).val());
    }
    console.log("test2");
  }



  jQuery("#dataSend").click(function() {
    dataSend();

    console.log("ok");
    return false;
  });

});

table,
tr,
td,
th {
  border: 1px solid black;
  padding: 0;
  margin: 50px 100px 50px 100px;
}

th {
  text-align: center;
}

th:nth-child(1) {
  width: 30px;
}

th:nth-child(2) {
  width: 300px;
}

th:nth-child(3) {
  width: 60px;
}

th:nth-child(4) {
  width: 300px;
}

div#questions {
  margin-left: 70px;
  display: flex;
  width: 900px;
  border: 1px dotted black;
}

div#questions div {
  border-right: 1px solid black;
  padding: 25px;
  width: 100%;
}

div#questions div:last-child {
  border-right: 0;
}

div#buttons button {
  margin: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dataExport">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Questions</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>First question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
      <tr>
        <th>2</th>
        <td>Second question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
      <tr>
        <th>3</th>
        <td>Third question</td>
        <td class="status"></td>
        <td class="comments"></td>
      </tr>
    </tbody>
  </table>

</div>


<div id="questions">
  <div>
    <h4>First question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question1" value="ok" checked="checked"> Ok<br>
      <input type="radio" name="question1" value="error"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment1" value="Comment1">
    </form>
  </div>
  <div>
    <h4>Second question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question2" value="ok"> Ok<br>
      <input type="radio" name="question2" value="error" checked="checked"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment2" value="Comment2">
    </form>
  </div>
  <div>
    <h4>Third question</h4>
    <form>
      <p>Choose 1 option</p>
      <input type="radio" name="question3" value="ok" checked="checked"> Ok<br>
      <input type="radio" name="question3" value="error"> Error<br><br>
      <p>Comment</p>
      <input type="text" name="comment3" value="Comment3">
    </form>
  </div>
  <div id="buttons">
    <button id="dataSend">Send data to table</button>
  </div>
</div>

更新

只是为了扩展从点击处理程序返回false 的原因。当您从处理程序返回 false 时，此 tells jQuery to stop the browsers default behavior for that event 与该元素相关。

就您的代码而言，<button> 元素具有将表单数据提交到服务器的默认“浏览器行为”，这将触发页面重新加载。通过从您分配给该按钮的单击处理程序中返回 false，这会通知 jQuery 防止发生提交和重新加载行为。