打開模型框從列表中獲取最後一個值

Question

我收到我的回調並將數據附加到div中，但是我試圖打開一個顯示谷歌地圖和圖像的模型框，但是我試圖通過的值不斷選擇我酒店列表中的最後一條記錄，而不是我從列表中選擇的那條記錄。

$.ajax({ 
    url: "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvinceCode=QL&countryCode=AU&&numberOfResults=10&_type=json", 
    results:{'pageSize':25}, 
    dataType: "jsonp", 
    success: function(data) { 
     var StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary; 

     $.each(StrHotelListResponse, function(index, value) { 

      var StrlowRate = parseInt(value.lowRate); 

      $('.span9').append('<div class="listings"><div class="row"><div class="span2"><a class="thumbnail pull-left" href="#"><img src="http://images.travelnow.com' + value.thumbNailUrl + '" height="110" width="110"' + 'alt="' + value.name + '"/></a></div><div class="span5" style="margin-left:-20px;"><h4 class="media-heading"><a href="' +'../steven_folder/conections/query_string.html?hotelID=' + value.hotelId + '">' + value.name + '</a><br><img src="img/star.gif" alt="" width="72" height="15"/></h4><p>'+ value.address1 + ' ' + value.city + ', ' + value.stateProvinceCode + ' ' + value.postalCode +'</p><div class="row"><div class="span2"><p class="trip-advisor-rating">TripAdvisor Traveller Rating<br><img src="' + value.tripAdvisorRatingUrl + '"/></p></div><div class="span2"><img src="img/listing/map.jpg" alt=""/><button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-sm btnMap">View map</button></div></div></div><div class="span2 pull-right p-block"><span class="rate-from">rate from</span><br /><div class="main-rate"><span class="main-currency">AU $</span>'+StrlowRate+'<br /><br /><a class="btn btn-primary btn-sm pull-right">Book online</a></div></div></div></div><!-- /Listings -->'); 

      $('.btnMap').click(function(){ 
       $('.modal-title').text(value.name); 
      }); 
     }); 
    }, 
    error: function(e) { 
     console.log(e.message); 
     //alert('no'); 
    } 
}); 

Answer 1

你或許應該移動click功能出你的Ajax調用和data-modaltitle屬性添加到您的btnMap，否則$('.modal-title').text(value.name);將永遠有您.each迭代的最後一個值：

$.ajax({ 
    url: "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvinceCode=QL&countryCode=AU&&numberOfResults=10&_type=json", 
    results:{'pageSize':25}, 
    dataType: "jsonp", 
    success: function(data) { 
     var StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary; 
     $.each(StrHotelListResponse, function(index, value) { 
      var StrlowRate = parseInt(value.lowRate); 
      $('.span9').append('<div class="listings"><div class="row"><div class="span2"><a class="thumbnail pull-left" href="#"><img src="http://images.travelnow.com' + value.thumbNailUrl + '" height="110" width="110"' + 'alt="' + value.name + '"/></a></div><div class="span5" style="margin-left:-20px;"><h4 class="media-heading"><a href="' +'../steven_folder/conections/query_string.html?hotelID=' + value.hotelId + '">' + value.name + '</a><br><img src="img/star.gif" alt="" width="72" height="15"/></h4><p>'+ value.address1 + ' ' + value.city + ', ' + value.stateProvinceCode + ' ' + value.postalCode +'</p><div class="row"><div class="span2"><p class="trip-advisor-rating">TripAdvisor Traveller Rating<br><img src="' + value.tripAdvisorRatingUrl + '"/></p></div><div class="span2"><img src="img/listing/map.jpg" alt=""/><button type="button" data-toggle="modal" data-target="#myModal" data-modaltitle="' + value.name + '" class="btn btn-sm btnMap">View map</button></div></div></div><div class="span2 pull-right p-block"><span class="rate-from">rate from</span><br /><div class="main-rate"><span class="main-currency">AU $</span>'+StrlowRate+'<br /><br /><a class="btn btn-primary btn-sm pull-right">Book online</a></div></div></div></div><!-- /Listings -->'); 
     }); 
    }, 
    error: function(e) { 
     console.log(e.message); 
     //alert('no'); 
    } 
}); 

jQuery(document).ready(function($){ 
    $('.btnMap').on('click', function(e){ 
     var modaltitle = $(this).data('modaltitle'); 
     $('.modal-title').text(modaltitle); 
    }); 
});