4

私は次のものを用意しています： 

    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 のそれぞれに画像を設定するにはどうすればよいですか?

4

2 に答える 2

6

に基づいてチェック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 要素を直接操作しています。属性の追加や削除、プロパティの変更、複製などを簡単に行うことができます。

于 2013-05-28T14:58:45.640 に答える
0

質問を正しく理解しているかどうかはわかりません。もしそうなら、少なくともこれはあなたを少し導くことができます：

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/

于 2013-05-28T15:03:17.107 に答える