一次交换两个 Div 并将它们交换为不同的两个并保持循环一定的秒数

Question

我一直在开发一个函数，它的功能有点像我想让它做的事情，如上所示，但是我遇到了一个问题，即一次交换两个 div 并用不同的两个替换，任何人都指出我正确的方向是不知道该怎么做，以下是我到目前为止所得到的：

$(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 个 div 一直在每个 setInterval 一个接一个地交换，但我需要一次显示和隐藏 2 个 div而不是一个一个

Answer 1

首先，您必须保持代码简单。尤其是在 SO 上要求某些东西时。我们不想知道你的 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>

这样调试起来更加简洁和快速。然后，您不应该在这里使用 id，而是使用特定的类来显示/隐藏它们：

<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>

隐藏 div 的 CSS 代码：

div.hide {display: none;}

现在您将只看到 #budgetTitle 和 #staticTitle div。好吧，现在让我们开始“交换”部分：
您只需为其他 div 提供 .hide 类并从其他 div 中删除该类。有一个jQuery 方法：jQuery.toggleClass()

现在你只需要这样做来交换 div：

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

Demo jsFiddle

如果您的代码中有其他不想切换的 div，则应在这四个 div 中添加 toggle 类：

<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），然后尝试在 div 中添加您自己的 html 代码。