大家好,我制作了一个 JqueryUI 简单滑块,在某个值范围内我制作了 Image URL,然后尝试更改 src 属性。
我正在尝试更改四个图像。
在此处检查jsFiddle。
我认为代码很好,但它不起作用,我不知道为什么?
替换这个:
$("#" + postRetrmntImage).attr('src', ImageName );
对此:
$("#postRetrmntImage").attr('src', ImageName );
问题是您没有分配任何postRetrmntImage
变量。
请参阅更新 jsFiddle演示
尝试这样做:
$("#" + postRetrmntImage.toString()).attr('src', ImageName );
说明:请使用这个:$("#" + sliderId).prop('src', ImageName );
因为在您的函数中,您将 id 传递为sliderId.
另外,如果我建议.prop
在这里使用好阅读:.prop() vs .attr()
休息演示你可以看到它是如何工作的,
希望这可以帮助:)
完整代码
$(document).ready(function () {
makeSingleSliderWithImage('postRetrmntMnthlyPaymt', 0, 10000, 0, 500);
}
);
function makeSingleSliderWithImage(sliderId, minimum, maximum, val, steps) {
//Display label shud have a X appended
$('#' + sliderId).slider(
{
//range: 'min',
min: minimum,
max: maximum,
step: steps,
//starting values for silders
value: val,
slide: function (event, ui) {
//var ImageURL = "Images/";
//var ImageName = "";
//var ext = ".jpg";
if ((ui.value >= 0) && (ui.value <= 2000))//Basic: 0-2000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 2500) && (ui.value <= 4500))//Moderate: 2500-4500
ImageName = "http://aux.iconpedia.net/uploads/14234829766434728.png";
else if ((ui.value >= 5000) && (ui.value <= 7000))//Comfortable: 5000-7000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 7500) && (ui.value <= 10000))//Luxury:7500-10,000
ImageName = "Luxury";
//var fullURL = ImageURL + ImageName + ext;
//change Image URL
$("#" + sliderId).prop('src', ImageName ); //{ src: fullURL });
alert($("#" + sliderId).prop('src'));
//change Slider Value
$("#" + sliderId + "X").text(ui.value);
}
}
);
}
换线...
$("#" + postRetrmntImage).attr('src', ImageName );
到...
$("#postRetrmntImage").attr('src', ImageName );
分配一个值postRetrmntImage
然后使用prop
而不是attr
查看为什么 prop
var postRetrmntImage="postRetrmntImage";
$("#" + postRetrmntImage).prop('src', ImageName );
试试这个
$("#postRetrmntImage").attr('src', 'newimage.png');