-1

当用户单击 div class="day" 时，我想创建一个新的 div id="list_1 class="row list" 并将其插入到 div class="row" 之后，它是 div ".day" 的父级.

为此，我尝试应用“insertAfter”、选择器“this”和“parent”。但是，它效果不佳。

jQuery 文件

function getDailyList(){  
    $.ajax({
        url: "/getDailyList",
        dataType: 'JSON',
        success: function(data){
            string = '<div id="list_1" class="row list">'
                +'<div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';
            if(data.event_list.length == 0){  
            return false              
            }
            else{
                for(var idx in data.event_list){
                    event_ = data.event_list[idx];
                    string = string + '<p class="text-left" style="color: white">' + event_['title'] + '</p>'; 
                }
            }
            string = string + '</div></div>';
            $(string).insertAfter('.row');  
           return false
        },
    });
    console.log('out');
}

$(document).ready(function(){
    $('.day').click(function(){
        //date = datetime.date()
        console.log('-------');
        if($(".list").css("display") == "block"){
            $(".list").remove();
        }
        else{
            getDailyList();
        }
        console.log('last');
    });
})

.html 文件 

<!DOCTYPE html>
<html>
<head>
  <title>D.Han</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="static/js/base.js"> </script>

</head>
<body>
  <div class="row">
    <div id="day1" class="day col-md-4 col-md-offset-2" data-cal-date ="2014-08-14" style="border: 1px solid gold">
      <p class="text-center">2014.08.26</p>
    </div>
    <div id="day2" class="day col-md-4" style="border: 1px solid gold">
     <p class="text-center">2014.08.27</p>
   </div>
 </div>

<div class="row">
  <div id="day3" class="day col-md-4 col-md-offset-2" style="border: 1px solid gold">
    <p class="text-center">2014.09.03</p>
  </div>
  <div id="day4" class="day col-md-4" style="border: 1px solid gold">
   <p class="text-center">2014.09.04</p>
 </div>
</div>

</body>
</html>
4

2 回答 2

1

您缺少一些分号，一个额外的冒号（这会破坏scriptIE 中的）并且您function getDailyList()不知道实际单击了哪个元素。

这应该这样做：

function getDailyList(el) {
    // Try to rename this variable. It's not a good idea to name a variable
    // using a type.
    // We declare it here so we can concatenate bits later.
    var string = "";

    $.ajax({
        url: "/getDailyList",
        dataType: 'JSON',
        success: function (data) {
            string = '<div id="list_1" class="row list"><div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';

            if (data.event_list.length === 0) {
                return false;
            } 
            else {
                for (var idx in data.event_list) {
                    event_ = data.event_list[idx];

                    // string = string + '' can be written like this.
                    string += '<p class="text-left" style="color: white">' + event_['title'] + '</p>';
                }
            }

            string += '</div></div>';

            // The function knows which element has been clicked,
            // so we just insert the new element after its parent.
            $(string).insertAfter(el.parents('.row'));

            return false;            
        } // Removed the extra colon after the bracket.
    });

    console.log('out');
}

$(document).ready(function () {
    $('.day').click(function () {
        //date = datetime.date();
        console.log('-------');

        if ($(".list").css("display") == "block") {
            $(".list").remove();
        } 
        else {
            // Pass which element has been clicked to the function
            // we are calling.
            getDailyList($(this));
        }

        console.log('last');
    });
});

演示（没有 AJAX - 用于测试）

于 2014-09-04T06:25:08.527 回答
0

将点击的“天”传递给附加调用

getDailyList(this.parentNode);

然后

function getDailyList(rowElement){

和

$(string).insertAfter(rowElement);

希望把它们放在哪里是有意义的，我还创建了一个小提琴（带有虚拟 ajax url 和逻辑）

于 2014-09-04T06:12:26.507 回答