[英]Why isn't querySelectorAll working with my ID values?
I use this piece of code for a live searching and for calculate the "Total":我使用这段代码进行实时搜索并计算“总计”:
$('#search').keyup(function () {
var x = [];
var y = [];
var $total = 0;
var inputString = $("#search").val();
var act = document.getElementById("labdb").value;
$('td:first-child').parent().show();
$('td:first-child').parent().addClass("notHide");
$('td:first-child').parent().removeClass("toHide");
$var = $('td:first-child').parent('tr:not(:icontains(' + inputString + ')):not(:contains("Total"))');
$var.hide();
$var.addClass('toHide');
$var.removeClass('notHide')
for (var price of document.querySelectorAll('tr.notHide td.price')) {
x.push(parseFloat(price.innerText));
}
for (var cantidad of document.querySelectorAll('tr.notHide td.quantity')) {
y.push(parseFloat(cantidad.innerText));
}
for(var i = 0; i <= x.length-1; i++){
$total += x[i] * y[i];
}
document.getElementById("total"+act).innerText = $total.toFixed(2);
});
I have various tables, with differents ID's, first is id='0', second is id='1', etc. I use collapse ('show') or ('hide') for show the selected table with a selector.我有各种表格,具有不同的 ID,第一个是 id='0',第二个是 id='1',等等。我使用 collapse ('show') 或 ('hide') 来显示带有选择器的选定表格。 So, the problems comes when I try to calculate the "Total", It's calculated with the value of the class "notHide" and "price/quantity".
所以,当我尝试计算“总计”时,问题就来了,它是用 class“notHide”和“价格/数量”的值计算的。 And all the tables get this Class, so the price got crazy if there is more than 1 table with "Total"
所有的桌子都得到这个 Class,所以如果有超过 1 个带有“总计”的桌子,价格就会变得疯狂
I KNOW, that I need to specify the ID of the table to work around, but I cant.我知道,我需要指定要解决的表的 ID,但我不能。
I have tested with:我测试过:
var act = document.getElementById("labdb").value;
var actHTML = document.getElementById("labdb");
It get the ID from the selected table, and then, in this part of code include it:它从所选表中获取 ID,然后在这部分代码中包含它:
for (var price of actHTML.document.querySelectorAll('tr.notHide td.price')) {
x.push(parseFloat(price.innerText));
}
for (var cantidad of actHTML.document.querySelectorAll('tr.notHide td.quantity')) {
y.push(parseFloat(cantidad.innerText));
}
But that, dont work, Im all the time thinking about other solutions and trying it, but I cant.但是,那行不通,我一直在考虑其他解决方案并尝试,但我做不到。 Its the final part of that page.
它是该页面的最后一部分。 Only need to specify the ID of the "Total" calculator.
只需要指定“合计”计算器的ID。
I had tried to with:我曾尝试过:
for (var price of document.querySelectorAll('#'+act+' tr.notHide td.price')) {
x.push(parseFloat(price.innerText));
}
for (var cantidad of document.querySelectorAll('#'+act+' tr.notHide td.quantity')) {
y.push(parseFloat(cantidad.innerText));
}
For be more specific, I need that document.querySelectorAll('tr.notHide td.quantity') comes from a specific ID.更具体地说,我需要 document.querySelectorAll('tr.notHide td.quantity') 来自特定的 ID。 For the rest, works perfectly, inclusive deleting the others tables with the parameter Total
对于 rest,工作完美,包括删除带有参数 Total 的其他表
EDIT_0:编辑_0:
I have do that:我这样做了:
let myTable = document.querySelector("#"+act);
let all = myTable.querySelectorAll('tr.notHide td.price');
for (var price of all) {
x.push(parseFloat(price.innerText));
}
for (var cantidad of all) {
y.push(parseFloat(cantidad.innerText));
}
for (var i = 0; i <= x.length - 1; i++) {
$total += x[i] * y[i];
}
And that is the console error:那是控制台错误:
scripts.js:57 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#0' is not a valid selector. scripts.js:57 未捕获的 DOMException:无法在“文档”上执行“querySelector”:“#0”不是有效的选择器。 at changePrice ( https://neutrino.ugr.es/js/scripts.js:57:28 ) at HTMLSelectElement.
在 HTMLSelectElement 的 changePrice ( https://neutrino.ugr.es/js/scripts.js:57:28 )。 (https://neutrino.ugr.es/js/scripts.js:15:5) at HTMLSelectElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js:2:43336) at y.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js:2:41320)
(https://neutrino.ugr.es/js/scripts.js:15:5) 在 HTMLSelectElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min。 js:2:43336) 在 y.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js:2:41320)
Well I found the error.好吧,我发现了错误。 The method
document.querySelectorAll('')
doesn't work if the ID starts with a digit.如果 ID 以数字开头,则方法
document.querySelectorAll('')
不起作用。 Like said in an article on the subject :就像一篇关于该主题的文章中所说:
The spec defines identifiers using a token diagram.
该规范使用令牌图定义标识符。 They may contain the symbols from a to z, from A to Z, from 0 to 9, underscores (_), hyphens -, non-ASCII symbols or escape sequences for any symbol.
它们可能包含从 a 到 z、从 A 到 Z、从 0 到 9 的符号、下划线 (_)、连字符 -、非 ASCII 符号或任何符号的转义序列。 They cannot start with a digit, or a hyphen (-) followed by a digit.
它们不能以数字或连字符 (-) 开头,后跟数字。 Identifiers require at least one symbol (ie the empty string is not a valid identifier).
标识符至少需要一个符号(即空字符串不是有效标识符)。
This is the final code:这是最终代码:
$('#search').keyup(function () {
var inputString = $("#search").val();
$('td:first-child').parent().show();
$('td:first-child').parent().addClass("notHide");
$('td:first-child').parent().removeClass("toHide");
$var = $('td:first-child').parent('tr:not(:icontains(' + inputString + ')):not(:contains("Total"))');
$var.hide();
$var.addClass('toHide');
$var.removeClass('notHide')
changePrice();
});
function changePrice() {
var x = [];
var y = [];
var $total = 0;
var act = document.getElementById("labdb").value;
actt="t"+act+act;
//alert(act);
var myTable = document.querySelector("#"+actt);
var allx = myTable.querySelectorAll('tr.notHide td.price');
var ally = myTable.querySelectorAll('tr.notHide td.quantity');
//alert(all)
for (var price of allx) {
x.push(parseFloat(price.innerText));
}
for (var cantidad of ally) {
y.push(parseFloat(cantidad.innerText));
}
for (var i = 0; i <= x.length - 1; i++) {
$total += x[i] * y[i];
}
//alert(x.length)
document.getElementById("total" + act).innerText = $total.toFixed(2);
}
I changed the ID to start with a t : actt="t"+act+act;
我将 ID 更改为以t开头:
actt="t"+act+act;
(act+act is because id is 00, not 0) (act+act是因为id是00,不是0)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.