1

Hi i am trying to dynamically set some of the contents of an html5 body with var strings defined in a JS.

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

4

5 回答 5

3

You will have to use JavaScript to "print" the contents of a variable, to the HTML-source. Here's an example:

<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:

$('#test').text('This goes into the element!');
于 2013-07-08T13:37:00.490 回答
2

您应该给 VAR-Tag 本身或包装 LI-Tag 一个唯一的 ID。

在 HTML 中

<li>
    <p>
          <h3>Your Name: <var id="name">name</var></h3>
    </p>
</li>

JavaScript

var name = "John Smith";
$("#name").text(name);

顺便说一下：

您不应该在段落中嵌套标题，这没有任何意义。段落是内联的，而标题是块元素。

看看这个小提琴

于 2013-07-08T13:44:17.677 回答
2

你可能想要像下面这样的东西。分配全局 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>
于 2013-07-08T13:47:37.880 回答
1

不应该以这种方式使用标签试试这个：

<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>

编辑：只是为了澄清一件事。标签不应该用于保存变量值的位置。当您在页面上显示某些代码时，正确的语义含义更多是表示数学变量或编程变量。如果我在这里错了，请有人纠正我。

于 2013-07-08T13:57:09.183 回答
0

try this

$(document).ready(function() {
  $("h3").text("Your name : John Smith");
});

Add some classes on your divs, to easuly select the good tags

于 2013-07-08T13:37:22.590 回答