は、どのように私はこの答えはここにあるが、私はそれを見つけることができなかった（または私はそれを見たときに、少なくとも<em>は</em>それを認識！）</strong>を知っ<strong>HTMLの画像のsrcタグ

Question

にjavascriptの変数を追加します。私はjqueryの仲間です。

問題：

私は20.pngを通じてを1.png という名前の20枚の画像を、持っています。ユーザーがボタンをクリックするたびにランダムに表示する別の画像が欲しいです。働いて何

：乱数を生成するための

私のjavascriptのコードは次のようになります。

var randomImage = 1 + Math.floor(Math.random() * 20); 

ない何...私は何をしようとしている

は、結果を渡すことです私のHTML文書には画像の名前として次のように書かれています：

<img id="randImg" class="img_answer" src="randomImage.png"> 

私は連結しようとしましたが、これを理解できないようです。 img IDやクラスに影響する関数を作成する必要がありますか？誰かがこれを行うための最もクリーンな方法を教えてくれますか？

Answer 1

var randomImage = 1 + Math.floor(Math.random() * 20);  
var imgName = randomImage+".png"; 
$("#randImg").attr("src",imgName); 

デモ：http://jsfiddle.net/a9Ltw/

Answer 2

ちょうど、ユーザーがJavaScriptを無効にしている場合は何も表示されません防ぐためにimgタグにいくつかのデフォルトの画像を追加し、jQueryので教えるのを助けるために少しそれをスペル$("#randImg").attr("src", randomImage + ".png");

Answer 3

を使用

<img id=randomImage /> 

頭の中で

そしておそらくあなたがロードするものを選んだまで画像を非表示にするには、この：

<style> 
#randomImage { 
    width: 400px; height: 200px; /* or whatever the dimensions are */ 
    visibility: hidden; 
} 
</style> 

その後、あなたのJavaScriptで：

var ordinal = 1 + Math.floor(Math.random() * 20); 
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png'); 

ので、HTMLはimgタグをレイアウトいくつかの初期のCSSは次元を設定し、それを隠すので、いくつかのブラウザでは醜い壊れたイメージアイコンなどはありません。

最後に、Javascriptがロードされて実行され、ランダムな序数が決定されます。 Javascriptの2番目の行はjqueryを呼び出してimgを可視にし、src属性をランダムイメージに設定します。 _Javascript_ではなく、jQueryの

Answer 4

$(document).ready(function() { 
    var randomImage = 1 + Math.floor(Math.random() * 20),  
       img = randomImage + ".png"; 

    $("#randImg").attr("src", img); 
}); 

Answer 5

var thesoruce = "http://localhost:8080/content/dam/admin/" + id ; 

g_fb.find('p').append('<img src= '+thesoruce +' height="250px" width="600px">');