我是 javascript/jquery 的新手，并且已经在这个问题上停留了一段时间。所以我有两个按钮，一个清除按钮将清除表格一行中的所有表单，一个重置按钮保存表格每一行的所有初始值。问题：所以目前当我运行脚本时，重置按钮将继续覆盖清除按钮。这意味着当我点击清除时它也将作为重置而不是清除行。我尝试创建要调用的独特类（.clear_button、.reset_button），如您在此处所见。我发现很难对 javascript 进行故障排除，尤其是刚接触它时，为什么会这样？<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $(".clear_button").click(function(){ function my_clearFunction(i) { document.getElementById("id_form-" + (i - 1) + "-Name").value = " "; document.getElementById("id_form-" + (i - 1) + "-Start").value = ""; document.getElementById("id_form-" + (i - 1) + "-End").value = ""; document.getElementById("id_form-" + (i - 1) + "-Advanced").value = " "; } }); $(".reset_button").ready(function(){ $('#reset :input:not([type="button"])').each(function(idx, ele) { ele.dataset.initvalue = ele.value; }); $('#reset [type="button"]').on('click', function(e) { // reset current row............ $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) { // restore the initial value ele.value = ele.dataset.initvalue; }) }); });});</script>注意：我理解的代码不统一，比如我的clear button逻辑就不是jquery写的。抱歉，我无法附加 jsfiddle，这个项目相对较大，我使用 django 导入我的表单，因此很难设置。因此，任何输入都将不胜感激，因为我已经坚持了很长一段时间并且似乎无法理解。还值得一提的是我的按钮输入标签，所以它们就在这里。<input type="button" class="clear_button" onclick="my_clearFunction({{ forloop.counter }})" value=" x "> <input type="button" class="reset_button" value=" x ">
2 回答
一只名叫tom的猫
TA贡献1906条经验 获得超3个赞
当我点击清除时，它也将作为重置而不是清除行。
您的重置侦听器声明为
$('#reset [type="button"]').on('click', function(e) {
...
})
该#reset元素似乎同时包含清除按钮和重置按钮，因此单击其中任何一个都将恢复初始值。
清除按钮也有自己的两个处理程序。在代码中声明了一个，它又声明了一个函数（不在处理程序本身中调用）和一个试图调用所述函数的内联处理程序。那不应该起作用，因为它在全局范围内是不可见的。
代替
$(button).on('click',(e)=>{
function doSomethingWith(i) {
...
}
doSomethingWith(e.target.id);
})
如果应该
function doSomethingWith(i) {
...
}
$(document).ready(function(){
$(button).on('click',(e)=>{
doSomethingWith(e.target.id);
});
});
那么它将对处理程序可见，而且在全局范围内也是可见的，因此您可以使用内联“onclick”调用它
<button onclick="doSomethingWith({{ forloop.counter }})" >
但是，如果您还在 JS 中声明了一个内联处理程序，那么您不应该有一个内联处理程序。由于您正在处理代码中的重置按钮，因此对于清除按钮也坚持这种方法。
现在，您用来清除行的方法需要您知道行的相对索引，以及每行的输入，您可以为它们计算各自的 ID。然而，在重置原始值时，您不需要知道任何事情：
$('.reset_button').on('click', function(e) {
// reset current row............
$(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {
// restore the initial value
ele.value = ele.dataset.initvalue;
})
});
该按钮只需要知道它与<tr>需要恢复其值的其他输入位于同一元素内。它不关心索引、ID，甚至不关心输入是什么，只要它们不是按钮即可。
你应该做同样的事情来清除这些值：
$('.clear_button').on('click', function(e) {
// reset current row............
$(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {
ele.value = "";
});
});
当谈到存储原始值时，我也习惯求助于 jQuery.data。无论如何，对于这个用例，你可以完全坚持
input.dataset.initialValue = input.value
代替
$(input).data('initialValue',input.value)
只要您牢记这些方法是不可互换的。您不能使用 dataset 设置 initialValue 然后使用 jQuery.data 或其他方式获取它。
function randomTime() {
return [
Number(100 * Math.random() % 12).toFixed(0).padStart(2, '0'),
Number(100 * Math.random() % 60).toFixed(0).padStart(2, '0')
].join(':');
}
function addFormRow(player_name = 'N/A') {
let tr = $('<tr class="form_row">'),
name = $('<input type="text" name="name" class="name">'),
start = $('<input type="time" name="start" class="start">'),
end = $('<input type="time" name="end" class="end">'),
advanced = $('<input type="number" name="advanced" class="advanced">'),
clear = $('<button class="clear_button">Clear</button>'),
reset = $('<button class="reset_button">Reset</button>');
name.val(player_name);
start.val(randomTime());
advanced.val(parseInt(Math.random() * 100, 10))
end.val(randomTime());
for (let input of [name, start, end, advanced, clear, reset]) {
$('<td>').append(input).appendTo(tr);
}
tr.appendTo('#forms tbody');
}
addFormRow('player one');
addFormRow('player two');
addFormRow('player three');
$(document).ready(function() {
$('#forms tbody tr').each((index,tr)=>{
$(tr).find('input').each((idx,input)=>{
$(input).data('initialValue',$(input).val());
});
})
$(".clear_button").on('click', (e) => {
let $this = $(e.target),
tr = $this.closest('tr');
tr.find('input').each((index, input) => {
input.value = '';
});
});
$(".reset_button").on('click', (e) => {
let $this = $(e.target),
tr = $this.closest('tr');
tr.find('input').each((index, input) => {
$(input).val($(input).data('initialValue'));
});
});
});
.advanced {
width: 4em;
}
.name {
width: 9em;
}
.start,
.end {
width: 5.5em;
}
.form_row input {
height: 1.1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="forms">
<thead>
<tr>
<th>name</th>
<th>start</th>
<th>end</th>
<th>advance</th>
<th colspan="2">actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
LEATH
TA贡献1936条经验 获得超7个赞
你的$(".clear_button").click()处理程序没有做任何事情。它定义了一个本地函数，但从不调用它。
与其尝试从 调用函数onclick()，不如data向保存索引的按钮添加一个属性。然后单击处理程序可以获取此属性并使用它来查找需要清除的所有相关元素。
$(".clear_button").click(function() {
var i = $(this).data("rel-id");
document.getElementById("id_form-" + (i - 1) + "-Name").value = " ";
document.getElementById("id_form-" + (i - 1) + "-Start").value = "";
document.getElementById("id_form-" + (i - 1) + "-End").value = "";
document.getElementById("id_form-" + (i - 1) + "-Advanced").value = " ";
});
<input type="button" class="clear_button" data-rel-id="{{ forloop.counter }}" value=" x ">
展开片段
添加回答
举报
0/150
提交
取消