gpt4 book ai didi

javascript - 获取数据后 javascript 将停止工作

转载 作者:行者123 更新时间:2023-11-30 19:19:56 26 4
gpt4 key购买 nike

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

我是用 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

谢谢你的帮助。

最佳答案

这里的主要问题是您的 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 以防止发生提交和重新加载行为。

关于javascript - 获取数据后 javascript 将停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57582413/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com