Tomo prestada la solución de Robert ( https://stackoverflow.com/users/1200182/robert-messerle ) sobre esta pregunta. ¿Cómo mostrar partes aleatorias de una página al actualizar?
Sin embargo, también me gustaría agregar una imagen a cada una de las listas de elementos. ¿Cómo se puede actualizar la solución para hacerlo?
JS
$(function () { var data = [ { h1: 'Test Title 1', p: 'Test Paragraph 1', a: { href: '#test-link1', text: 'Test Link 1' } }, { h1: 'Test Title 2', p: 'Test Paragraph 2', a: { href: '#test-link2', text: 'Test Link 2' } }, { h1: 'Test Title 3', p: 'Test Paragraph 3', a: { href: '#test-link3', text: 'Test Link 3' } } ]; //-- select an item at random var index = Math.floor( Math.random() * data.length ); var item = data[index]; //-- create the HTML elements var $placeholder = $('#placeholder'); $('<h1>').text(item.h1).insertAfter($placeholder); $('<p>').text(item.p).insertAfter($placeholder); $('<a>').attr('href', item.a.href).text(item.a.text).insertAfter($placeholder); });HTML"
<div id="placeholder"></div>Puedes editar cada elemento de datos de esta manera:
{ h1: 'Test Title 3', p: 'Test Paragraph 3', a: { href: '#test-link3', text: 'Test Link 3' }, img: { src: '/1.jpg' } }luego use esto al final de su código js:
$('<img>').attr('src', item.img.src).insertAfter($placeholder);