-1

ユーザーが div class="day" をクリックすると、新しい div id="list_1 class="row list" を作成し、div ".day" の親である div class="row" のみの後に挿入したい.

これを行うために、「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 に答える