My HTML Code is like this :
...
@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="cruisedropd">
<div class="loading"></div>
</div>
</div>
...
@endforeach
...
My Javascript Code is like this :
$(function(){
$('.save').click(function () {
var $parent = $(this).closest('div.iteration');
if ($parent.hasClass("is_loading")) {
$(".cruisedropd").hide();
$parent.removeClass("is_loading")
}
else {
$parent.addClass("is_loading")
var bla = $parent.find('.tes:first').val();
console.log(bla);
...
$parent.find('.loading').html('<img src="http://ift.tt/1PwvLqC"> 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
}
}
});
}
});
});
When the first time I click more in the first line, there is the process of loading and displaying detailed information. After that, I click more again, and it hides the detail information. Then I click more again no action. It looks like jQuery hide(), adding Class and remove Class not run properly
Why did it happen?
Your help is greatly appreciated
Cheers
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire