简体   繁体   English

传递变量来创建 <h3> 和 <div> 使用JavaScript或jQuery的标签

[英]Passing variables to create <h3> and <div> tags using JavaScript or jQuery

Not sure how to use javascript or jquery to make my divs populate with accordian style headings and content. 不知道如何使用javascript或jquery使我的div充满可折叠样式的标题和内容。

 <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#accordion").accordion( autoheight: false); }); /** Variable * variableID:String - unique string identifier for the variable * name:String - plain text name * description:String - description of the variable and its meaning * value:Integer - current number-based value of the variable * locked:Boolean - whether the variable is locked against further modification */ function loadVariables(variables) { if (typeof variables != "object") { alert(variables); return;} for (var i = 0; i < variables.length - 1; i++) { /* make name= <h3><a href="#">name</a></h3> make variableID, description, value= <div> <p>"Variable ID : " + variableID</br> "Description : " +description</br> "Initial Value : " +value</br> </p> <p>"History"</br> A container for updateVariable function. </p>*/ } }; function updateVariable(variable) { // make update Variable in the History box as variable values change // change background color and change locked icon status }; </script> </head> <body> <div id="accordion"> <!--- Divs Created Dynamically here ----> </div> </body> </html> 
// Inside the for loop, do this:
// This is the <h3> jQuery object you'll be inserting. I'm chaining the creation.
var h3 = $('<h3>').append($('<a>').attr('href', '#').text('name'))
$('#accordion').append(h3)
// This is the <div> object to be inserted into the accordion.
var div = $('<div>').append($('p').html('html inside first <p>'));
div = div.append($('p').html('html for history'))
$('#accordion').append(div)

The key here is that you can add things to the DOM with $(parent).append($('<tag-name>')). $('<tag-name>') 这里的关键是您可以使用$(parent).append($('<tag-name>')). $('<tag-name>')将事物添加到DOM $(parent).append($('<tag-name>')). $('<tag-name>') $(parent).append($('<tag-name>')). $('<tag-name>') will create a new jQuery object of that tag that is just floating. $(parent).append($('<tag-name>')). $('<tag-name>')将创建一个刚刚浮动的标签的新jQuery对象。 The .append(obj) method will attach the obj at the end of the parent that is calling it. .append(obj)方法会将obj附加在调用它的父对象的末尾。 So $('#accordion').append($('<h3>')) will append an open and close h3 tag at the end of #accordion. 因此$('#accordion').append($('<h3>'))将在#accordion的末尾附加一个打开和关闭h3标记。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM