2012-06-22 2 views
0

Привет, ребята, я создал простой слайдер JqueryUI, в определенном диапазоне значений создаю URL-адрес изображения, а затем попытаюсь изменить атрибут src.<img> атрибут src не меняется с использованием JQuery

Есть четыре изображения, которые я пытаюсь изменить.

Проверьте jsFiddle here.

Я думаю, что код в порядке, но его не работает, я не знаю почему?

+0

... но ползунок не двигается:) (FFox) –

+0

Взгляните на свой f irebug/chrome console: 'postRetrmntImage не определен $ (" # "+ postRetrmntImage) .attr ('src', ImageName);' – jantimon

+0

Спасибо, ребята, я использовал неопределенную переменную: /, это настолько глупо от меня :-( –

ответ

2

Заменить это:

$("#" + postRetrmntImage).attr('src', ImageName); 

к этому:

$("#postRetrmntImage").attr('src', ImageName); 

Проблема заключается в том, что Youre не назначен какой-либо postRetrmntImage переменной.

См обновление jsFiddle demo

+0

Спасибо, дорогая, я использовал неопределенную переменную: /, это так глупо от меня :-( –

1

Изменение линии ...

$("#" + postRetrmntImage).attr('src', ImageName); 

к ...

$("#postRetrmntImage").attr('src', ImageName); 
2

Стараясь сделать это:

$("#" + postRetrmntImage.toString()).attr('src', ImageName); 
2

демоhttp://jsfiddle.net/8Sw5J/

Объяснение: Пожалуйста, используйте это: $("#" + sliderId).prop('src', ImageName);, так как в вашей функции вы передаете идентификатор, как sliderId.

Кроме того, если я могу предложить использовать .prop хорошо прочитать здесь: .prop() vs .attr()

Rest демо вы можете см., как это работает,

Надеюсь, что это поможет :)

полный код

$(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); 
        } 
       } 
      ); 
     }​ 
1

присвоить значение postRetrmntImage затем использовать prop вместо attrsee why prop

var postRetrmntImage="postRetrmntImage"; 
$("#" + postRetrmntImage).prop('src', ImageName); 
+0

+1 за подсказку –

+0

не могу использовать $ ("# postRetrmntImage").prop ('src', ImageName); –

+0

да, вы можете, я пытался сказать, вы все равно можете использовать свою переменную – Rab

0

Попробуйте

$("#postRetrmntImage").attr('src', 'newimage.png'); 
Смежные вопросы