Question

我试图实现以下目标。

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

以下是目前正在创建的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>

实现这一目标的任何帮助都将是最有帮助的

Answer 1

使用以下CSS初步隐藏messageContent字段：

.messageContent {
    display: none;
}

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

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

Answer 2

如果我说得对，那么在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);

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

另外，在您的原始代码中，您创建了两个div id（您的key变量）并且两个元素不应具有相同的ID，因此我更改了它到key+'-alert'和key+'-content'。

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

2 个答案: