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>

隐藏divs的CSS代码：

div.hide {display: none;}

现在，您只会看到#budgetTitle和#staticTitle div。那么，现在让我们去“交换”部分：
您只需要为其他div提供.hide类，并从其他类中删除此类。这有一个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代码。

立即交换两个Div并将它们换成另外两个并保持循环一定的秒数

1 个答案: