Блог

Если бы у меня был блок 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 и так далее.

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

Первый шаг — сгруппировать все связанные части вместе. Смотрите 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 /

используйте метод jquery appendTo

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

Вот простая версия javascript — без jquery, с рабочей демонстрацией

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)
  

Одним из вариантов является создание элементов с помощью 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 , чтобы отметить, куда будут вставлены элементы.