javascript 试图为 div id 添加变量。是否可以?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3318391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 00:50:23  来源:igfitidea点击:

trying to add variable for div id. is it possible?

javascriptjquery

提问by pradeep cs

i am trying to use variable inside body. just see below sample code

我正在尝试在体内使用变量。请参阅下面的示例代码

<body>
 <div class="demo">
     <script>
     var count = 4;
      for(i=1;i<=count;i++){
          var varSlid = "A"+i;
          $('.demo').append('<div id= varSlid ></div></br>');
      }
     </script>
</div>
</body>

but it is throwing errors. please check and tell me where the error is?

但它正在抛出错误。请检查并告诉我错误在哪里?

回答by Amit Soni

Try This

试试这个

var varSlid = "A"+i;
          $('.demo').append('<div id= ' + varSlid  + '></div></br>');

回答by Andy E

The error is that .demohasn't finished parsing yet, so you shouldn't be attempting to manipulate it. This can cause serious issues in older versions of IE ("operation aborted", anyone?). Move the script to just outside the <div>tag:

错误是.demo还没有完成解析,所以你不应该尝试操作它。这可能会导致旧版本的 IE 出现严重问题(“操作中止”,有人吗?)。将脚本移动到<div>标签外:

<body>
<div class="demo">
</div>
<script>
     var count = 4;
      for(var i=1;i<=count;i++){
          var varSlid = "A"+i;
          $('.demo').append('<div id='+varSlid+'></div><br/>');
      }
</script>
</body>

As others have pointed out, you also need the quotation marks to work the variable into your HTML string, although this wouldn't have caused any errors - you would just end up with a bunch of elements all with the same id ("varSlid").

正如其他人指出的那样,您还需要引号将变量处理到您的 HTML 字符串中,尽管这不会导致任何错误 - 您最终会得到一堆具有相同 id 的元素(“varSlid” )。

回答by Richard JP Le Guen

Maybe it's my lack of jQuery-fu... but shouldn't </br>be <br/>?

也许是我缺乏 jQuery-fu ......但不应该</br><br/>

Also, you shouldn't create 4 elements <div id= varSlid >since the idattribute should be unique.

此外,您不应创建 4 个元素,<div id= varSlid >因为该id属性应该是唯一的。

Edit:You probably intended to use the value of the variable varSlidas the idattribute, but rit now it's part of a hardcoded string literal. You'd want to something more like:

编辑:您可能打算使用变量的值varSlid作为id属性,但现在它是硬编码字符串文字的一部分。你想要更像的东西:

$('.demo').append('<div id="'+varSlid+"'></div><br/>');

回答by Steve Kritzer

I'm not real clear on the OP's original question, but this fits the title.

我不太清楚 OP 的原始问题,但这符合标题。

HTML5 has a data-* attribute, where the * represents your data. I've had luck with this passing Web.py (python) variables from the templator to js functions.

HTML5 有一个 data-* 属性,其中 * 代表您的数据。我很幸运能够将 Web.py (python) 变量从模板器传递到 js 函数。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

<!DOCTYPE html> <!--declare we are using HTML5-->
<html>
<head>
  <script>
    var jsVersionData = ''; //create a global variable for example simplicity
  </script>
</head>
<body>
  <div id="stored-variable" data-stored="7">
    <script> 
      jsVersonData =  document.getElementById("stored-variable");  //get the variable from the div
    </script>  
  </div>

  <script>
    var myStr = jsVersonData.dataset.stored;  // the variable
    var myInt = Number(myStr);                // convert the variable to int
    alert(myInt + 1);
  </script>
</body>
</html>

回答by 3rgo

It's : $('.demo').append('<div id="' + varSlid + '"></div></br>');

它的 : $('.demo').append('<div id="' + varSlid + '"></div></br>');

回答by Teja Kantamneni

Try this...

试试这个...

$('.demo').append($('div').attr('id', varSlid)).append('<br/>');

Also wrap this entire function in on dom readylike

还将整个函数包装成on dom ready类似

$(function(){
    //your code here...
});

回答by Digital Human

change: $('.demo').append('<div id= varSlid ></div></br>');to: $('.demo').append('<div id=' + varSlid + ' ></div></br>');

更改:$('.demo').append('<div id= varSlid ></div></br>');到:$('.demo').append('<div id=' + varSlid + ' ></div></br>');