Поменяйте местами два деления одновременно и поменяйте их на два разных и продолжайте цикл в течение заданного количества секунд

0

Я разрабатываю функцию и делаю то, что хочу, как показано выше, но у меня есть проблема с тем, что она меняет сразу два divs и заменяет их разными двумя, кто-то указывает мне в правильном направлении, не уверен, как чтобы идти об этом, Ниже я до сих пор понял:

$(function () {

var counter = 0,
    divs = $('#budgetSpent,#budgetTitle,#staticBudget,#staticTitle');

function showDiv () {
    divs.hide() // hide all divs
        .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
        .show('fast'); // and show it

    counter++;
}; // function to loop through divs and show correct div

showDiv(); // show first div    

setInterval(function () {
    showDiv(); // show next div
}, 5 * 1000); // do this every 10 seconds

});

Краткое описание: Так что в значительной степени у меня есть два счетчика, каждые 10 секунд отображается div, а остальные скрыты, теперь он поменяется, но два div id с заголовком рядом с ними, я не могу заставить их поменяться вместе с соответствующими счетчиками так скажем, например: £ 0000 Budget1 (отображается в течение 10 секунд), затем свопит к £ 11111 Budget2, и он должен работать в цикле, до сих пор перечисленные 4 divs поменялись местами каждый раз в setInterval. Но мне нужно показать и скрыть 2 divs в то время, а не по одному

  • 0
    Не уверен, почему я проголосовал ... Я попытался решить проблему.
  • 0
    Не уверен, ни то, но я прочитал это пару раз, и я не понимаю, что такое обмен или вообще то, что вы пытаетесь сделать
Показать ещё 18 комментариев
Теги:

1 ответ

2
Лучший ответ

Во-первых, вы должны сохранить свой код простым. Особенно, когда просят что-то о ТАК. Мы не хотим знать, что в ваших div, но нам просто нужна их разметка HTML:

<div id='budgetTitle'>budgetTitle div</div>
<div id='staticBudget'>staticBudget div</div>
<div id='staticTitle'>staticTitle div</div>
<div id='budgetSpent'>BudgetSpent div</div>

Это намного чище и быстро отлаживается. Тогда вы не должны использовать здесь ids, а конкретный класс, чтобы показать/скрыть их:

<div id='budgetTitle'>budgetTitle div</div>
<div id='staticBudget' class="hide">staticBudget div</div>
<div id='staticTitle'>staticTitle div</div>
<div id='budgetSpent' class="hide">BudgetSpent div</div>

Код CSS для этого хэширования divs:

div.hide {display: none;}

Теперь вы увидите только #budgetTitle и #staticTitle. Ну, теперь отпустите для "swapping" часть:
Все, что вам нужно, это дать другим .hide класс .hide и удалить этот класс из других. Для этого существует способ jQuery: jQuery.toggleClass()

Теперь вам нужно только сделать это, чтобы обменять divs:

// This will give all divs that don't have the "hide" class the class "hide"
// and remove the class "hide" from all divs that have the "hide" class 
$('div').toggleClass('hide');

Окончательный код:

function swapDivs () {
    $('div').toggleClass('hide');
}

$(function () {
   setInterval(
       function () {
           swapDivs(); // show next div
       },
       3 * 1000
    ); // do this every 3 seconds    
});

Демо-версия jsFiddle

Если у вас есть другие div в коде, который вы не хотите переключать, вы должны добавить класс toggle к этим четырем div:

<div id='budgetTitle' class="toggle">budgetTitle div</div>
<div id='staticBudget' class="toggle hide">staticBudget div</div>
<div id='staticTitle' class="toggle">staticTitle div</div>
<div id='budgetSpent' class="toggle hide">BudgetSpent div</div>

А потом просто сделайте несколько изменений в js:

function swapDivs () {
    $('div.toggle').toggleClass('hide');
}

Если вам не удается заставить его работать, попробуйте перезапустить с нуля (без javascript, css и html), а затем попытайтесь добавить свой собственный HTML-код внутри div.

Поделиться
  • 0
    Хороший ответ, +1. Но, возможно, вам следует добавить класс для переключения div, чтобы не скрывать каждый div на его странице.
  • 0
    В этом случае было только четыре div прямо в теле. Но да, вы правы. Я сделаю небольшую правку
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню