Использование <img src> в js?

Question

я следующее место:

var diff = maxval - ui.value; 
    $("#output").html(diff?"diff. of " + diff : "no diff"); 

Теперь я хотел бы добавить изображение к каждому, если есть разница в цене или нет, то есть:

var diff = maxval - ui.value; 
    $("#output").html(diff?"<img src='yes.png' height='50' width='50' /> diff. of " + diff : "<img src='no.png' height='50' width='50' /> no diff"); 

Видя, как будто что не работает, как я могу установить изображение для каждого из этого выходного div?

Answer 1

Вы проверяете на основе diff, разве вы не хотите проверить, больше ли оно?

Отрицательные числа оцениваются в true.

Boolean(-1);//true 
Boolean(50);//true 
Boolean(-500);//true 
Boolean(-0.001);//true 
Boolean(0);//false 

Вот как я бы создать новый образ с атрибутом источника, выбранные на основе дифференциала, который превышает 0. Обратите внимание, я использую фактические элементы, поэтому я меняю атрибут вместо src строковое значение, которое, как мне кажется, создает более читаемый код.

var diff = maxval - ui.value; 
var img = new Image(); 
img.src = (diff > 0) ? "yes.png" : "no.png"; 
img.width = "50px"; 
img.height = "50px"; 
$("#output").empty().append(img); 

Вот полностью ваниль решение, в том числе текстовый узел:

var diff = maxval - ui.value; 
var img = new Image(); 
img.src = (diff > 0) ? "yes.png" : "no.png"; // assuming you mean to check positive value 
img.width = "50px"; 
img.height = "50px"; 
var el = document.getElementById("output"); 
el.appendChild(img); 
var text = (diff > 0) ? "diff" : "no diff"; 
var txt = document.createTextNode(text); 
el.appendChild(txt); 

Хотя преимущества этого «более» кода не кажется очевидным на первый, очень легко манипулировать. Я работаю с элементами DOM напрямую, а не с строк, я могу легко добавлять или удалять атрибуты, изменять свойства, клонировать их и т. Д.

Answer 2

Я не уверен, правильно ли я понял вопрос, если это так, по крайней мере, это могло бы направлять вас немного:

var yes = $("<img>").attr({"src": 'yes.png', "height": '50', "width": '50' }); 
var no = $("<img>").attr({"src": 'no.png', "height": '50', "width": '50' }); 

if(diff){ 
    $("#output").append(yes).append('diff. of ' + diff); 
} 
else{ 
    $("#output").append(no).append('no diff'); 
} 

Пример: http://jsfiddle.net/WKg3A/