- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
您好,我正在尝试从输入选项和文本字段中获取数据并插入到表中。
我是用 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');
您的脚本需要考虑的其他一些建议是;
[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/
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下,我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲,这是那个包含标题,以及转到其他窗口和内容的按钮... 所以问题
我有一个 Azure WebJob,它在一个非常简单的应用服务标准:1 Small(计划)上运行。 现在,我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时,我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后,XCod
我刚刚下载了android开放源代码项目,并尝试使用make来构建它,我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
我以前从未制作过 makefile,但我们已经收到了这个,但是,如果我尝试运行它,它只会说, missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
好吧,这段代码非常基本。用户将答案输入文本框,如果等于“第一+第二”,他们就得到一分。然后,他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了,函数“doCalculation”将再次运行,他
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时,我的 viewController 出现问题。 有什么方法可以停止该
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc,swc 将作为库在 flashdevlop 中使用。 一
我在线程中有一个连接,因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
你好,我做了一个 php 套接字服务器来从 plc 获取数据,plc 被配置为 tcp 套接字客户端。 我有一个严重的问题,如果本地网络出现故障,似乎功能 socket_accept 停止,plc 无
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。 请帮助获得正确的函数或方法来停止 setTimeout 函数。 我一直在尝试
我正在运行一个多项目SBT(v0.13)构建,并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。 当前的行为是,当某项无法在子项目中进行编译时,构建将继续(以编译所有其他子项目)。 一旦
我有播放.wav文件中声音的代码,但是我无法停止播放歌曲,甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲,所以这是一个问题。这是我如何播放wav的代码: public class EasySo
我正在寻找一种解决方案,该如何控制从JSF应用程序播放音频文件。 我不需要完整的解决方案,只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。 我尝试搜索过去的问题,但没有成功。 我
我已经在test.ps1中编写了以下函数,在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
我必须设置一个 10 分钟的计时器,它会重定向到主屏幕。此外,它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
我正在制作一个聊天应用程序,功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时,“自动播放”效果很好。因此,现在我
我基本上希望页面能够接受用户输入的时间(以秒为单位)。 之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮,以便用户可以从头开始倒计时。 这是我到目前为止得到的:
我需要停止 $.each 循环,加载图像,然后继续循环。我有 Canvas ,可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在,当我尝试从数组加载对象时,存在一个问题:由于尺寸不同,并且它们
我是一名优秀的程序员,十分优秀!