Come faccio ad aggiungere una variabile javascript per tag HTML immagine src

Question

io so questa risposta è qui, ma sono stato in grado di trovare (o almeno riconoscere che quando l'ho visto!). Sono un noob imparziale di jquery, quindi abbi pazienza con me.

Problema:

ho 20 immagini, denominate 1.png attraverso 20.png. Vorrei un'immagine diversa da visualizzare casualmente ogni volta che un utente fa clic su un pulsante.

di Cosa di lavoro:

Il mio codice JavaScript per generare il numero casuale è simile al seguente:

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

cosa non lo è ...

Quello che sto cercando di fare è passare il risultato di che al mio documento HTML come il nome dell'immagine, in modo che si legge qualcosa di simile:

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

Ho provato a concatenare, ma non riesco a capirlo. Devo creare una funzione che influenzi l'ID o la classe img? Qualcuno può indicarmi il modo più pulito per farlo?

Answer 1

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

Demo: http://jsfiddle.net/a9Ltw/

Answer 2

Basta aggiungere qualche immagine di default per img tag per impedire la visualizzazione di nulla se l'utente ha disattivato JavaScript, e poi in jQuery utilizzare $("#randImg").attr("src", randomImage + ".png");

Answer 3

ortografia fuori un po 'per contribuire ad insegnare :

Nella pagina che avresti avuto qualcosa di simile:

<img id=randomImage /> 

E probabilmente in testa per nascondere l'immagine fino a quando hai scelto uno di caricare, questo:

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

Poi, nel tuo Javascript:

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

Quindi il codice HTML stabilisce il tag img e alcuni dei primi CSS impostano le sue dimensioni e lo nascondono in modo che non ci siano brutte icone di immagini rotte ecc. in alcuni browser - solo uno spazio vuoto.

Quindi, infine, il Javascript viene caricato e eseguito, determinando un ordinale casuale. La seconda riga di Javascript chiama jquery per rendere visibile img e imposta l'attributo src sull'immagine casuale.

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