Передача переменных для создания тегов <h3> и <div>с использованием JavaScript или jQuery - PullRequest
Новая
       6

Передача переменных для создания тегов <h3> и <div>с использованием JavaScript или jQuery

1 голос
/ 19 октября 2010

Не уверен, как использовать 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>

1 Ответ

1 голос
/ 19 октября 2010 
// 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)

Ключевым моментом здесь является то, что вы можете добавить вещи в DOM с помощью $(parent).append($('<tag-name>')). $('<tag-name>'), что создаст новый объект jQuery этого тега, который просто плавает. Метод .append (obj) прикрепит obj в конце родительского элемента, который его вызывает. Таким образом, $('#accordion').append($('<h3>')) добавит открывающий и закрывающий тег h3 в конце # accordion.

...