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);
    }); 
});

打开模型框从列表中获取最后一个值

1 个答案: