jQuery 在 html5 正文中动态设置变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17528020/
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
dynamically setting variables in html5 body?
提问by Jonathan
Hi i am trying to dynamically set some of the contents of an html5 body with var strings defined in a JS.
嗨，我正在尝试使用 JS 中定义的 var 字符串动态设置 html5 正文的一些内容。
below is what i have written so far and it doesnt seem to display the value specified.
以下是我到目前为止所写的内容，它似乎没有显示指定的值。
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<script>
var name = "John Smith";
</script>
<div data-role="page" id="page">
<div data-role="header">
<button></button>
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <p><h3>Your Name: <var>name</var></h3></p></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
i am trying to insert John Smith inside the "Your Name: text.
我试图在“你的名字：文本”中插入约翰史密斯。
Thanks
谢谢
回答by Eric
You will have to use JavaScript to "print" the contents of a variable, to the HTML-source. Here's an example:
您必须使用 JavaScript 将变量的内容“打印”到 HTML 源。下面是一个例子：
<div id="test"></div>
document.getElementById('test').innerHTML = 'This goes into the element!';
But since you're using jQuery, you could do this as well:
但由于您使用的是 jQuery，您也可以这样做：
$('#test').text('This goes into the element!');
回答by dschu
You should either give the VAR-Tag itself or it's wrapping LI-Tag an unique ID.
您应该给 VAR-Tag 本身或它包装 LI-Tag 一个唯一 ID。
In HTML
在 HTML 中
<li>
<p>
<h3>Your Name: <var id="name">name</var></h3>
</p>
</li>
JavaScript
JavaScript
var name = "John Smith";
$("#name").text(name);
And by the way:
顺便说一下：
You shouldn't nest a Heading inside of a Paragraph, this doesn't make any sense. Paragraphs are INLINE while Headings are BLOCKELEMENTS.
您不应该在段落中嵌套标题，这没有任何意义。段落是内联的，而标题是块元素。
Check out this FIDDLE
看看这个小提琴
回答by Louis Ricci
You probably want something like below. Have global JS variables assigned, reference them with a VAR html5 tag, use JS at the end of body (or after DOM load) to substitute the keys in the VAR tags with the values held in the global VARS object.
你可能想要像下面这样的东西。分配全局 JS 变量，使用 VAR html5 标记引用它们，在正文末尾（或在 DOM 加载之后）使用 JS 将 VAR 标记中的键替换为全局 VARS 对象中保存的值。
<script>
VARS = {};
VARS.name = "John Smith";
VARS.age = 45;
</script>
...
Name : <var>name</var><br/>
Age : <var>age</var>
...
<script>
// run once at end of body
var all = document.getElementsByTagName("var");
for(var i=0; i<all.length; i++) {
var elm = all[i];
var key = elm.innerHTML;
if(VARS[key] != null)
elm.innerHTML = VARS[key];
else
elm.innerHTML = "";
}
</script>
回答by Rafael Eyng
The tag isn't supposed to be used this way Try this:
标签不应该这样使用试试这个：
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<script>
var name = "John Smith";
$(document).ready(function() {
$("#name").text(name);
});
</script>
<div data-role="page" id="page">
<div data-role="header">
<button></button>
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <p><h3>Your Name: <span id="name"></span></h3></p></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
Edit: just to clarify one thing. The tag isn't supposed to be used to hold the place to the value of a variable. It's correct semantic meaning is more to represent a mathematical variable or a programming variable when you are showing some code on your page. If I'm wrong here, please someone correct me.
编辑：只是为了澄清一件事。标签不应该用于保存变量值的位置。当您在页面上显示一些代码时，正确的语义含义更多是表示数学变量或编程变量。如果我在这里错了，请有人纠正我。
回答by user
try this
尝试这个
$(document).ready(function() {
$("h3").text("Your name : John Smith");
});
Add some classes on your divs, to easuly select the good tags
在你的 div 上添加一些类，以便轻松选择好的标签
