更改文本在Ajax回调的图像 [英] Changing text to an image in Ajax callback
本文介绍了更改文本在Ajax回调的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我学习jQuery和具有酒店的列表，包括星级评定，我从一个Ajax调用得到。我想改变的是文本与恒星的图像的收视率，但我似乎无法做到这一点。
如果我运行一个if语句，每个它只返回并运行第一个是说4.5的休息在结果列表列表的价值，因此所有的结果显示4.5，而不是各自星级
感谢
VAR jqxhr = $阿贾克斯（{
网址： "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvince$c$c=NW&country$c$c=AU&_type=json",
数据类型：JSONP
回调：hotelList
}）
.done（功能（数据）{
VAR StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary;
$每个（StrHotelListResponse，函数（指数值）{
$（'目标'）追加（value.name +'＆LT;跨度类=评级 data-exprating="'+value.hotelRating+'"></span><span>'+value.hotelRating+'</span><br /＆GT;'）
}）;
如果（$（'。等级'）。数据（'exprating'）=='1'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star1.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
否则，如果（$（'评级'）。数据（exprating'）=='1.5'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star1-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则如果（$（'。等级'）。数据（'exprating'）=='2'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star2.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
否则，如果（$（'评级'）。数据（exprating'）=='2.5'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star2-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（$（'评级'）。数据（exprating'）=='3'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star3.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
否则，如果（$（'评级'）。数据（exprating'）=='3.5'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star3-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（$（'评级'）。数据（exprating'）=='4'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star4.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
否则，如果（$（'评级'）。数据（exprating'）=='4.5'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star4-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（$（'评级'）。数据（exprating'）=='5'）{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / star5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
其他{
$（'评级'）HTML（'＆LT; IMG SRC =IMG / starnr.gifALT =星级评定WIDTH =72高度=15/＆GT;'）。
}
}）
.fail（函数（）{
警报（错误）;
}）
。总是（函数（）{
//警报（成品）;
}）;
jqxhr.always（函数（）{
//警报（第二名）;
}）;
}）;
解决方案
您被执行，如果在循环外部/ else语句，因此只能做它的第一个，你需要移动至内循环，然后检查在循环中的当前项目的值，然后附加到目标分区。
VAR jqxhr = $阿贾克斯（{
网址： "https://api.eancdn.com/ean-services/rs/hotel/v3/list?cid=55505&minorRev=99&apiKey=cbrzfta369qwyrm9t5b8y8kf&locale=en_AU&city=Sydney&stateProvince$c$c=NW&country$c$c=AU&_type=json",
数据类型：JSONP
回调：hotelList
}）
.done（功能（数据）{
VAR StrHotelListResponse = data.HotelListResponse.HotelList.HotelSummary;
$每个（StrHotelListResponse，函数（指数值）{
$（'目标'）追加（value.name +'＆LT;跨度类=评级 data-exprating="'+value.hotelRating+'"></span><span>'+value.hotelRating+'</span><br /＆GT;'）
如果（value.hotelRating =='1'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star1.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='1.5'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star1-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='2'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star2.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='2.5'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star2-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='3'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star3.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='3.5'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star3-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='4'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star4.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='4.5'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star4-5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
否则，如果（value.hotelRating =='5'）{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / star5.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
其他{
$（'目标'）追加。（'＆LT; IMG SRC =IMG / starnr.gifALT =星级评定WIDTH =72高度=15/＆GT;'）;
}
}）;
}）
.fail（函数（）{
警报（错误）;
}）
。总是（函数（）{
//警报（成品）;
}）;
jqxhr.always（函数（）{
//警报（第二名）;
}）;
}）;
I am learning jQuery and have a list of hotels with star ratings that I am getting from an Ajax call. I want to change the ratings that are in text to an image with stars but I cannot seem to do this.
If I run an if statement with each it only returns and runs the value of the first in the list which is say 4.5 to the rest in the result list so all result show 4.5 instead of their respective star rating
thanks
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" );
});
});
解决方案
You were executing the if/else statements outside of the loop so it only did it for the first one, you need to move them inside the loop and then check the value of the current item in the loop and then append to your target 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" );
});
});
这篇关于更改文本在Ajax回调的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
