顯示標題、URL 和圖像刷新

Question

在這個問題上，我從 Robert ( https://stackoverflow.com/users/1200182/robert-messerle ) 那里借用了解決方案。 如何在刷新時顯示頁面的隨機部分？

但是，我還想為每個元素列表添加一個圖像。 如何更新解決方案才能做到這一點？

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>

Answer 1

您可以像這樣編輯每個數據元素：

{
    h1: 'Test Title 3',
    p: 'Test Paragraph 3',
    a: { href: '#test-link3', text: 'Test Link 3' },
    img: { src: '/1.jpg' }
}

然后在你的 js 代碼末尾使用它：

  $('<img>').attr('src', item.img.src).insertAfter($placeholder);