Javascript 使用<；img src>；在js中？

我已准备好以下各项：

    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" ); 

var diff=maxval-ui.value；
$（“#输出”）.html（不同于“+diff:”无差异“）；

---

鉴于这似乎不起作用，如何为该输出分区中的每个分区设置一个映像？

您正在基于

diff

进行检查，您的意思是检查它是否大于0吗

负数计算为

true

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

下面是我如何创建一个新图像，其源属性是基于diff大于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元素而不是字符串，我可以轻松地添加或删除属性、更改属性、克隆它们等等。

我不确定我是否正确理解了这个问题，如果是这样，至少这可以为您提供一点指导：

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');
}

var yes=$（“”）.attr（{“src”：“no.png”，“height”：“50”，“width”：“50”）；
if（diff）{
$（“#输出”）.append（是）.append（'diff.of'+diff）；
}
否则{
$（“#输出”）.append（no.append（'no diff'）；
}

---

示例：

什么样的元素是“输出”？单个div？你说“不工作”是什么意思？11684，如中所示，图像不显示在单个输出div@Filipos KarapetisThanks Benjamin中。显示img，然后在输出div中显示文本怎么样？@Dave这就是

appendChild

在本机DOM版本中所做的，而

append

在jQuery版本中所做的。它将一个元素附加到输出div（即ID值为output的div）。正确，尝试检查正值。你能提供一个例子，说明img和

的区别吗“+diff

文本和其他？没关系：）刚刚看到更新的答案，抱歉！谢谢@Dave非常欢迎您，在不必依赖jQuery的情况下高效地使用JavaScript会使您成为一名更好的开发人员：）您理解正确，谢谢。但是，在滑动时，它会在滑块移动时一行接一行地添加输出（追加），并且没有显示图像：（与上面benjamin的代码相同-您能提供一个JSIDLE吗？当然，请看这里：只需将

diff

的值切换到

true

或

false

即可查看不同的图像