Question

我的HTML代码是这样的：

    ...
         @foreach($hotel as $key=>$value)    
        ...
             <div class="iteration">
               <input type='hidden' value='<?php  echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut']   ?>' id='tes'>
        ...

    ...
           {{ $value['HotelNo'] }}      
           {{ $value['HotelName'] }}
    ...     
           <button class="save">More</button>

           <div class="loading"></div>    
    ...   </div>
        @endforeach
    ...

我的Javascript代码是这样的：

$(function(){
    $('.save').click(function () {
        var $parent = $(this).closest('div.iteration');
        var bla = $parent.find('.tes:first').val();
        console.log(bla);
        $parent.find('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

        $.ajax({
            type: "GET",
            url: "hotel-detail",
            success: function (response) {
                var elem = $parent.find('.loading').empty();  //remove org content
                for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var
                    elem.append("<p>" + response.SearchAvailResponse.Hotel[i].HotelNo + "</p>");  //add the new content
                }
            }
        });  
    });
});

点击＆＃34;更多＆＃34;按钮，系统显示加载过程的内容。我想点击＆＃34;更多＆＃34;再次按钮，系统隐藏内容。所以当点击＆＃34;更多＆＃34;按钮，系统显示加载过程的内容。点击＆＃34;更多＆＃34;再次按钮，系统隐藏内容。等等

点击后的内容如何隐藏＆＃34;更多＆＃34;按钮？

解决我问题的任何解决方案？

非常感谢

Answer 1

您需要以某种方式记住加载状态并显示内容。例如，您可以向父元素$parent.addClass("is_loading")添加一些类，然后检查if ($parent.hasClass("is_loading")) {...} else {...}或使用元素$parent.data("loading", true)的数据并检查if ($parent.data("loading")) {...} else {...}。一个分支显示内容并发出ajax请求，另一个隐藏内容。例如，成功回调以后会重置状态$parent.data("loading", false)或$parent.removeClass("is_loading")。

点击＆＃34后如何隐藏内容;更多＆＃34;？

1 个答案: