Как добавить переменную JavaScript в HTML изображения Src тега

Question

Я знаю этот ответ здесь, но я не смог найти его (или, по крайней мере признать это, когда я увидел его!). Я родственник noob для jquery, так что медведь со мной, пожалуйста.

Проблема:

У меня есть 20 изображений, названный 1.png через 20.png. Я хотел бы, чтобы другое изображение отображалось случайным образом каждый раз, когда пользователь нажимает кнопку.

Что работает:

Мой Javascript код для генерации случайных чисел выглядит следующим образом:

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

Что не ...

То, что я пытаюсь сделать, это передать результат из этого в мой HTML-документ как название изображения, так что читается примерно так:

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

Я пробовал конкатенировать, но, похоже, не понял этого. Нужно ли создавать функцию, которая влияет на идентификатор или класс img? Может ли кто-нибудь указать мне на самый чистый способ сделать это?

Answer 1

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

Демо: http://jsfiddle.net/a9Ltw/

Answer 2

Просто добавить изображение по умолчанию в img теге предотвращающую отображающее ничего, если пользователь отключил JavaScript, а затем в 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 вызывает jquery, чтобы сделать img видимым и установить свой атрибут src на случайное изображение.

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