Question

如果我有一个html编码块通过css风格化，例如：

<title>Test Title 1</title>
<p>Test Paragraph 1<p>
<a href="test link1">test link 1</a>
<title>Test Title 2</title>
<p>Test Paragraph 2<p>
<a href="test link2">test link 2</a>
<title>Test Title 3</title>
<p>Test Paragraph 3<p>
<a href="test link3">test link 3</a>

我希望能够随机地一起显示一组部分（例如标题1，第1段和链接1）。然后，如果我刷新它随机显示1,2或3.但他们需要保持在一起，就像1的部分不能显示3的一部分，依此类推。

我知道这很简单，但我无法弄清楚如何让它们随机显示。提前谢谢！

Answer 1

第一步是将所有相关部分组合在一起。请参阅下面的HTML。请注意，标题标签已替换为标题标签。标题应该在页面的标题中。

<section>
    <h2>Test Title 1</h2>
    <p>Test Paragraph 1</p>
    <a href="test link1">test link 1</a>
</section>
<section>
    <h2>Test Title 2</h2>
    <p>Test Paragraph 2</p>
    <a href="test link2">test link 2</a>
</section>
<section>
    <h2>Test Title 3</h2>
    <p>Test Paragraph 3</p>
    <a href="test link3">test link 3</a>
</section>

然后，在CSS中你需要隐藏它们：

section {
    display: none;
}

而且，这是jQuery的东西：

$("section").eq(Math.floor(Math.random() * 3)).css("display", "block");

这是jsfiddle：http://jsfiddle.net/Aej52/

Answer 2

使用jquery appendTo method

html代码：

<div id = " titleBox">
</div>

将此javascript放入onload事件或文档就绪

自己测试链接

function showTitle(){
   var rand = Math.floor((Math.random() * 3) + 1);
   $("<title>Test Title "+rand+"</title>
      <p>Test Paragraph "+rand+"<p>
      <a href=\"test link\">test link "+rand+"</a>"
    ).appendTo("#titleBox");
}

Answer 3

这是一个普通的javascript版本 - 没有jquery，working demo

HTML

<title>Test Title 1</title>
<!-- correctly close paragraph tags -->
<p>Test Paragraph 1</p>
<a href="test link1">test link 1</a>
<title>Test Title 2</title>
<p>Test Paragraph 2</p>
<a href="test link2">test link 2</a>
<title>Test Title 3</title>
<p>Test Paragraph 3</p>
<a href="test link3">test link 3</a>

的Javascript

// get references to elements in question, and store them...
var titles = document.getElementsByTagName("title");
var ps = document.getElementsByTagName("p");
var as = document.getElementsByTagName("a");

// every now and then, run a function...
setInterval(function(){
    // set all elements to display none
    for(i=0;i<ps.length;i++){
        // add one to offset page title - not part of demo code
        titles[i+1].style.display = "none";
        as[i].style.display = "none";
        ps[i].style.display = "none";
    };
    // choose a lucky winner...
    var choice = Math.floor(Math.random()*(ps.length));
    // make the randomly chosen index item show...
    as[choice].style.display = "block";
    ps[choice].style.display = "block";
    // add one to offset page title - not part of demo code
    titles[choice+1].style.display = "block";
}, 1000)

Answer 4

一种选择是通过JavaScript生成元素：

http://jsfiddle.net/qmM36/

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>

在此示例中，我使用占位符div来标记项目的插入位置。

如何在刷新时显示页面的随机部分？

4 个答案:

HTML

的Javascript