0

我正在学习 jQuery，并且有一个我从 Ajax 调用中获得的星级酒店列表。我想将文本中的评分更改为带有星星的图像，但我似乎无法做到这一点。

如果我对每个运行 if 语句，它只返回并运行列表中第一个的值，即 4.5 到结果列表中的其余部分，因此所有结果都显示 4.5 而不是它们各自的星级

谢谢

var jqxhr =  $.ajax({ 
            url: "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvinceCode=NW&countryCode=AU&_type=json",
            dataType: "jsonp",
            callback: "hotelList"
            })
          .done(function(data) {
            var StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary;   
                $.each(StrHotelListResponse, function(index, value) {
                $('.target').append(value.name + '<span class="rating" data-exprating="'+value.hotelRating+'"></span><span>'+value.hotelRating+'</span><br />')
                });
                    if($('.rating').data('exprating') == '1') {
                                $('.rating').html('<img src="img/star1.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '1.5'){
                                $('.rating').html('<img src="img/star1-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '2'){
                                $('.rating').html('<img src="img/star2.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '2.5'){
                                $('.rating').html('<img src="img/star2-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '3'){
                                $('.rating').html('<img src="img/star3.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '3.5'){
                                $('.rating').html('<img src="img/star3-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '4'){
                                $('.rating').html('<img src="img/star4.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '4.5'){
                                $('.rating').html('<img src="img/star4-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if($('.rating').data('exprating') == '5'){
                                $('.rating').html('<img src="img/star5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else{
                                $('.rating').html('<img src="img/starnr.gif"  alt="Star rating" width="72" height="15"/>');
                            }
          })
          .fail(function() {
            alert( "error" );
          })
          .always(function() {
            //alert( "finished" );
          });

jqxhr.always(function() {
  //alert( "second finished" );
});
});
4

1 回答 1

1

您在循环之外执行 if/else 语句，所以它只对第一个语句执行此操作，您需要将它们移动到循环内，然后检查循环中当前项目的值，然后附加到目标 div。

var jqxhr =  $.ajax({ 
            url: "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvinceCode=NW&countryCode=AU&_type=json",
            dataType: "jsonp",
            callback: "hotelList"
            })
          .done(function(data) {
            var StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary;   
                $.each(StrHotelListResponse, function(index, value) {
                    $('.target').append(value.name + '<span class="rating" data-exprating="'+value.hotelRating+'"></span><span>'+value.hotelRating+'</span><br />')
                     if(value.hotelRating == '1') {
                                $('.target').append('<img src="img/star1.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '1.5'){
                                $('.target').append('<img src="img/star1-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '2'){
                                $('.target').append('<img src="img/star2.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '2.5'){
                                $('.target').append('<img src="img/star2-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '3'){
                                $('.target').append('<img src="img/star3.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '3.5'){
                                $('.target').append('<img src="img/star3-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '4'){
                                $('.target').append('<img src="img/star4.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '4.5'){
                                $('.target').append('<img src="img/star4-5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else if(value.hotelRating == '5'){
                                $('.target').append('<img src="img/star5.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                            else{
                                $('.target').append('<img src="img/starnr.gif"  alt="Star rating" width="72" height="15"/>');
                            }
                });
          })
          .fail(function() {
            alert( "error" );
          })
          .always(function() {
            //alert( "finished" );
          });

jqxhr.always(function() {
  //alert( "second finished" );
});
});
于 2013-10-18T03:53:18.817 回答