从动态创建的div动态创建div

Im trying to achieve the following.

我试图实现以下目标。

I have divs that are being created using json generayed from fields in a database, for the id of the div im using the id field passed through the json, this essentially creates a button. A the time of creating that div i have created another div that is populated by the message field contents passed in the json, what I would like to do is in creation of the second 'message div' hide it, then assign a onclick function to the first dynamically created div that would show the 'message div' when the first div is clicked. I have looked at how to do this by dynamically creating css to do this but all the tuts i have read have been insufficient for my needs.

我有使用从数据库中的字段生成的json创建的div,对于使用通过json传递的id字段的div的id,这实际上创建了一个按钮。创建div的时候我创建了另一个div,它由json中传递的消息字段内容填充,我想要做的是创建第二个'message div'隐藏它,然后分配一个onclick函数第一个动态创建的div,它会在单击第一个div时显示“message div”。我已经看过如何通过动态创建css来做到这一点,但我读过的所有tuts都不足以满足我的需求。

The following is the jquery im presently creating

以下是我目前创建的jquery

$(document).ready(function() {//READY FUNC   

        $.getJSON("http://**************/**********/includes/messageRetrieve.php",function(data)  {//JSON

           $.each(data, function(key, val) {//iterate each data
               var id = val.id;
               var messageId = val.messageId;
               var messageSubject = val.messageSubject;
               var messageContent = val.messageDetail;

             $('#serverData').append('<div id="' + key + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + key + '" class="messageContent">' + messageContent + '</div>');


                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

Any help achieving this would be most helpful

任何帮助实现这一点将是最有帮助的

2 个解决方案

#1

If I get you correctly, your loop after the AJAX call should be :

如果我找到你的话,你在AJAX调用之后的循环应该是:

var id = val.id;
var messageId = val.messageId;
var messageSubject = val.messageSubject;
var messageContent = val.messageDetail;
var container = $('#serverData');

var alert = $('<div id="' + key + '-alert" class="messageAlert">' + messageSubject + '</div>');
var content = $('<div id="' + key + '-content" class="messageContent">' + messageContent + '</div>');

alert.click(function() { content.toggle(); });
alert.appendTo(container);
content.hide().appendTo(container);

This way, the alert is appended to your serverData container and already bound to click and to the content that goes with it. Your content div is appended hidden (the hide() call) and the alert div will toggle it.

这样,警报将附加到您的serverData容器,并已绑定到单击以及随其附带的内容。您的内容div隐藏(hide()调用),警报div将切换它。

Also, in your original code you are creating two div with the same id (Your key variable) and two elements shouldn't have the same id, so I changed it to key+'-alert' and key+'-content'.

此外,在您的原始代码中,您创建了两个具有相同ID(您的密钥变量)的div,并且两个元素不应具有相同的ID,因此我将其更改为key +' - alert'和key +' - content'。

#2

Use the following CSS to initially hide the messageContent fields:

使用以下CSS最初隐藏messageContent字段:

.messageContent {
    display: none;
}

Then you can use this jQuery to display the message:

然后你可以使用这个jQuery来显示消息:

$(document).ready(function() {
    $("#serverData").on("click", ".messageAlert", function() {
        $(this).next(".messageContent").toggle();
    });
});

#1