当我尝试使用 jQuery 将一些 HTML 插入 DIV 元素时,我得到 NaN

发布于 2024-09-03 08:02:05 字数 1633 浏览 9 评论 0原文

我试图在单击 numObj 类的元素时显示一个文本框。由于某种原因,我得到 NaNNaNaNaNNaNNaNaNaN ,我希望在下面的代码中看到 searchForm 变量的结果。

我知道 NaN 代表非数字。我不明白的是为什么 Javascript 需要一个数字?我不明白为什么它在乎。

$(".numObj").live('click',function(){
   var preId = $(this).attr('preId');
   var arrayPos = $(this).attr('numArrayPos');

        alert(preId +" "+arrayPos);

        var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
          +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+
          +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"+
          +"</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>&lt;=</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'>&lt;=</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"+
          +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"+
          +"</span></td>"+
          +"</tr>"+
          +"</table>";
        $(".numObj").filter("[preId='"+preId+"']").filter("[numArrayPos='"+arrayPos+"']").html(searchForm);

    }); 

具有 numObj 类的生成代码如下所示

<td><div class="numObj" preid="73" numarraypos="5"><span class="normal">585.0</span></div></td>

I am tring to display a text box when a element of class numObj is clicked. For some reason I get NaNNaNaNaNNaNNaNaNaN where I expect to the see the result of the searchForm variable in the code below.

I know that NaN stands for Not a Number. What I don't understand is why is Javascript expecting a number? I can't understand why it cares.

$(".numObj").live('click',function(){
   var preId = $(this).attr('preId');
   var arrayPos = $(this).attr('numArrayPos');

        alert(preId +" "+arrayPos);

        var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
          +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+
          +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"+
          +"</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'><=</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'><=</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"+
          +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"+
          +"</span></td>"+
          +"</tr>"+
          +"</table>";
        $(".numObj").filter("[preId='"+preId+"']").filter("[numArrayPos='"+arrayPos+"']").html(searchForm);

    }); 

The generated code that has the numObj class looks something like this

<td><div class="numObj" preid="73" numarraypos="5"><span class="normal">585.0</span></div></td>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

岛徒 2024-09-10 08:02:05

正如其他人指出的那样,问题在于 + 运算符。除了连接字符串之外,它还用作数学加法。由于 Javascript 的动态类型,在字符串上单独使用一元 + 会导致字符串转换为数字:

+"12"; // -> 12
+"10" + +"12" // -> 22

代码的几行在行尾和新行开头。第二个 + 将被视为一元数学加法,并尝试 将字符串转换为数字。考虑以下几点:

"Hello" +
+ "World" // -> "HelloNaN" 

The problem, as others have pointed out is the + operator. Aside from concatenating strings, it is also used as mathematical addition. Because of Javascript's dynamic typing, use of unary + alone on a string will cause the string to be converted into a number:

+"12"; // -> 12
+"10" + +"12" // -> 22

Several lines of your code have the + operator at the end of the line and the beginning of the new line. The second + will be treated as a unary mathematical addition and will attempt to convert the string to a number. Consider the following:

"Hello" +
+ "World" // -> "HelloNaN" 
流云如水 2024-09-10 08:02:05

您有多个彼此相邻的加号运算符。

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
+"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+

请注意,第一行末尾有一个加号运算符,最后一行开头有一个加号运算符。删除这些加号运算符之一(对于每一行),您可能会消除错误。

顺便说一下,JSLint 很快就能发现这些错误。

You have multiple plus operators next to each other.

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
+"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+

Note that there is a plus operator at the end of the first line, and one at the start of the last line. Remove one of these plus operators (for each line), and you'll probably get rid of the error.

By the way, JSLint finds these errors in a jiffy.

一身仙ぐ女味 2024-09-10 08:02:05

去掉 var searchForm 每一行末尾的 + 符号

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"
      +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"
      +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"
      +"</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'><=</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><=</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"
      +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"
      +"</span></td>"
      +"</tr>"
      +"</table>";

Take the + symbols off the end each line of var searchForm

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"
      +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"
      +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"
      +"</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'><=</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><=</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"
      +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"
      +"</span></td>"
      +"</tr>"
      +"</table>";
ぶ宁プ宁ぶ 2024-09-10 08:02:05

使整个 searchForm 变量仅存在于一行中可以使其工作......但这并不优雅。如果有更好的解决方案我很想知道。

Making the entire searchForm variable only exist on a single line makes it work ... but this is not elegant. If there are any better solutions I would be keen to know.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文