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进行检查，是否要检查它是否大于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元素而不是字符串，我可以轻松添加或删除属性，更改属性，克隆它们等。

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/

在js中使用<img src=""/>？

2 个答案: