Question

我正试图在点击事件中使用jquery重现这个html。

<div class="comments_action_207">
   <div class="list_item_comments list_item_comments_207">
      <div class="comment_separator">text goes here</div>
   </div>
</div>

在点击事件之前

我有以下html：

<div class="comments_action_207"></div>

所以我需要在前面的代码中添加它

<div class="list_item_comments list_item_comments_207"><div class="comment_separator">text goes here</div></div>

Answer 1

我认为你正在寻找类似的东西：

$(function() {
    $('.comments_action_207').click(function() {
        var num = this.className.split('_').pop();
        $('<div/>',{'class':'list_item_comments list_item_comments_' + num})
            .append('<div class="comment_separator">text goes here</div>')
            .appendTo(this);
    });
});

点击专门分配给comments_action_207元素。我想你也想分配给其他人。

这将从类的末尾获取数字，创建新元素，添加需要的数字，并将结果附加到comments_action_207元素。

生成的HTML将是：

<div class="comments_action_207">
    <div class="list_item_comments list_item_comments_207">
        <div class="comment_separator">text goes here</div>
    </div>
</div>

Answer 2

你想在jquery的变量中设置你想要添加为字符串数据类型的html代码。然后在你的click函数处理程序中，将div的html内容设置为变量。在jquery中，它看起来像这样。（假设在运行此脚本之前加载了jquery）。

http://docs.jquery.com/Html有关如何使用jquery在选择器中获取和设置html的文档。

//jquery code:

<script type="text/javascript">
$(document).ready(function(){
    var stringToAdd = "<div class='list_item_comments list_item_comments_207'><div class='comment_separator'>text goes here</div></div>"

    $('.comments_action_207').click(function(){
       $(this).html(stringToAdd);
     });

});
</script>

Answer 3

$(".comments_action_207").empty(); // clear the div off, if you do not want to retain old values

$(".comments_action_207").append("<div class='list_item_comments list_item_comments_207'><div class='comment_separator'>text goes here</div></div>");

jquery追加课程

3 个答案: