Вращение между тремя заголовками с помощью .replaceWith jquery

Question

Вращение между тремя заголовками с помощью .replaceWith jquery

0

Он предназначен для вращения между тремя различными элементами h3. В настоящее время он работает, но довольно неряшливый. Когда я в конце концов имитирую это для ap и элемента img, это будет дольше, чем нужно. Я новичок в jQuery, поэтому я ищу небольшую очистку и полировку.

HTML:

<h3 id="subtitle1">first subtitle</h3>

JQuery:

setInterval(function() {
    if($("#subtitle1").length) {
        $('#subtitle1').replaceWith("<h3 id='subtitle2'>second subtitle</h3>");
    } else if($("#subtitle2").length) {
        $('#subtitle2').replaceWith("<h3 id='subtitle3'>third subtitle</h3>");
    } else if($("#subtitle3").length) {
        $('#subtitle3').replaceWith("<h3 id='subtitle1'>first subtitle</h3>");
    }
}, 2000);

igloude 12 май 2014, в 18:40

Источник

0

каков твой вопрос?
Alex 12 май 2014, в 16:10
0

Возможно дублирование в stackoverflow.com/questions/5248721/… и stackoverflow.com/questions/11075664/…
Zlatin Zlatev 12 май 2014, в 16:10
0

Что вы имеете в виду под "небрежным"? У вас есть много HTML внутри вашего кода JavaScript, это плохая привычка. Я поместил бы все три заголовка в html и скрыл два из них, предоставив им класс «скрытый». В jquery вы можете использовать addClass («скрытый») и removeClass («скрытый»)
Jonas Grumann 12 май 2014, в 16:11
0

Также проверьте designscrazed.com/…
Zlatin Zlatev 12 май 2014, в 16:12

Показать ещё 2 комментария

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Возможно дублирование в stackoverflow.com/questions/5248721/… и stackoverflow.com/questions/11075664/…
Что вы имеете в виду под "небрежным"? У вас есть много HTML внутри вашего кода JavaScript, это плохая привычка. Я поместил бы все три заголовка в html и скрыл два из них, предоставив им класс «скрытый». В jquery вы можете использовать addClass («скрытый») и removeClass («скрытый»)

Archer · Accepted Answer · 2014-05-12T13-55-00.000Z

Это всего лишь пример - вам придется изменить его в соответствии с вашими точными потребностями.

HTML

<h3 id="header-title">This is some title text</h3>
<p id="header-text">This is some text</p>
<img id="header-image" src="./images/something.jpg" />

Javascript

var mods = [{
        title: "This is header text 1",
        text: "This is paragraph text 1",
        image: "./images/header-image-01.jpg"
    }, {
        title: "This is header text 2",
        text: "This is paragraph text 2",
        image: "./images/header-image-02.jpg"
    }, {
        title: "This is header text 3",
        text: "This is paragraph text 3",
        image: "./images/header-image-03.jpg"
    }];

var counter = 0;

setInterval(function() {
    counter = (counter + 1) % mods.length;

    $("#header-title").text(mods[counter].title);
    $("#header-text").text(mods[counter].text);
    $("#header-image").attr("src", mods[counter].image);

}, 20000);

Он просто перебирает все изменения, которые вы размещаете в mods массивов, делая изменения каждые 20 секунд. Добавить/удалить свойства и изменить функцию в интервале в соответствии с вашими страницами.

Вы также можете расширить количество элементов в массиве столько, сколько хотите, не нарушая его.