Использование Jquery для случайной вставки изображения с гиперссылкой - PullRequest
Новая
       11

Использование Jquery для случайной вставки изображения с гиперссылкой

0 голосов
/ 20 марта 2020

Это может быть немного натянуто, но у меня есть веб-страница с 3 маленькими заполнителями изображений внизу.

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

Например, на данный момент у меня есть: 

<div class="col-xs-12 col-sm-12 col-md-4 homeFooter1">
<a href="Link-1"><img src="/image-1.jpg" alt="Image 1"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 homeFooter2">
<a href="Link-2"><img src="/image-2.jpg" alt="Image 2"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 homeFooter3">
<a href="Link-3"><img src="/image-3.jpg" alt="Image 3"></a>
</div>

Я бы хотел, чтобы "homeFooter1" выбирал из 3-х разных изображений - каждое со своей ссылкой на разные страницы, и то же самое для "homeFooter2" и "homeFooter3" .

Изображения и ссылки не обязательно соответствуют определенному шаблону. Например, я мог бы выбрать между: Корм ​​для домашних животных, Печенье для собак, Fi sh - Корм ​​в первом заполнителе, с ссылками на корм для домашних животных, собачьи рюкзаки и водные виды спорта.

Надеюсь, это имеет смысл! Я видел примеры выбора изображения из массива, но не изображения с соответствующей ссылкой.

Самый простой способ, вероятно, заключался бы в размещении всех элементов div на странице и использовании массива для скрытия / отображения , но я знаю о пропускной способности пользователя.

Заранее спасибо!

1 Ответ

0 голосов
/ 20 марта 2020

Вы должны использовать два массива или словарь, а затем генератор случайных чисел. Используйте Jquery, чтобы добавить изображения и ссылки на страницу, как показано ниже. Таким образом, вам не нужно будет печатать каждый div, и это более эффективно. 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<div class="col-xs-12 col-sm-12 col-md-4 homeFooter1" id="placeholder"></div>

<script>

var images = ["/image-1.jpg", "/image-2.jpg", "/image-3.jpg"];
var links = ["http://google.com","http://msn.com","http://stackoverflow.com"];

//below is the random number generator the 3 is the upper limit int and 1 is the lower limit exclusive

var currImage = Math.floor((Math.random() * 3) + 1);
//array for images


$(document).ready(function(){
  $("#placeholder").append("<a href='" + links[currImage] + "'><img src='" + images[currImage] +"' alt='Image 1'></a>");
  });


</script>
...