0

我已经收到我的回调并将数据附加到一个 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');
    }
});
4

1 回答 1

0

您可能应该将该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);
    }); 
});
于 2013-09-29T04:28:47.293 回答