javascript - 获取数据后 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，好的。

我无法获取 test2 并且正常。

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

谢谢你的帮助。

Answer 1

这里的主要问题是您的 radio 输入元素多于状态元素，这会在迭代每个 radio 元素以更新相应的 .status 时导致问题。元素。

考虑更新此行以选择那些 :checked 的 radio 输入元素确保每个状态元素有一个 radio 元素:

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

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

• 而不是像这样访问 jquery 选择的结果 [i]更新元素时​​，考虑使用 .eq(i)方法与您从输入元素(即 comment.eq(i). 和 status.eq(i2) )访问数据所做的一样
• 而不是设置 innerHTML对于选定的 jquery 元素，您可以改为通过 .text() 设置元素的文本内容(即 comment.eq(i).text("content"); )
• 返回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 以防止发生提交和重新加载行为。