我有DIV可變量的真實標記爲「換行」與一些自動顯示和隱藏多個div

<div id="wrap0">Fixed text</div> 
<div id="wrap1"></div> 
<div id="wrap2"></div> 
<div id="wrap3"></div>

Wrap0是固定文本，包1和以下是從MySQL PHP的生成。我想在一定的時間內顯示wrap0，隱藏wrap0並顯示wrap1的內容，隱藏wrap1並再次顯示wrap0，隱藏wrap0和顯示wrap2等。

我設法使用間隔jquery：

var $j = jQuery.noConflict();  
$j(document).ready(function() { 
     setInterval(function() { 
      $j.fx.off = true 
      $j('#wrap1').toggle('show'); 
      $j('#wrap0').toggle('hide'); 
     }, 3000); 
    });

但是，這隻適用於2個div。 div的數量（wrap）是可變的，它取決於mysql表中的行數。

我已經看過不同的腳本，但無法弄清楚如何使這個工作自動，大多數腳本使用clickfunction，它隱藏$（this），這是當前div。

如果它隨機切換，它會更容易嗎？

來源

2014-04-08 Prastow

什麼是$ J＆prime; O_o – Alex

@Alex - 可能是一個noConflict句柄。 – j08691

是的，抱歉，我已將它添加到腳本中。 – Prastow

$j(document).ready(function() { 
    setInterval(function() { 
     $j.fx.off = true 
     var wraps = $j('*[id^=wrap]');    // get the jQuery array of elements 
     var currentWrap = $j('*[id^=wrap]:visible'); // get the currently visible wrap element 
     var idx = Array.prototype.indexOf.apply(wraps, currentWrap); // get its index 
     currentWrap.hide();       // hide it 
     var nextIndex = (idx+1) % wraps.length;  // calculate the next index while taking into consideration the maximum length of the wraps array 
     var nextWrap = $j(wraps[nextIndex]);   // get the next element 
     nextWrap.show();        // show it 
    }, 3000); 
});

如果#wrapN元素不改變，你可以移動wraps變了一個閉合的性能改進。

對於選擇信息，請參閱official docs

編輯

正如指出的indexOf不受IE8或低於所支持的意見，在這種情況下，你可以使用$.inAarray：

var idx = $j.inArray(currentWrap, wraps);

注意：再次如果包裝不變，jessegavin的解決方案更具有高性能。

來源

2014-04-08 14:01:27 Matyas

感謝您對腳本中的所有評論，非常感謝！但是，我仍然很難理解。我看到你做了一個「包裝」的數組，但你怎麼知道索引？它會自動將該數字視爲索引嗎？ – Prastow

行'Array.prototype.indexOf。apply（wraps，currentWrap）;''會從'wraps'數組中得到'currentWrap'的索引 – Matyas

不確定這是否對OP有影響，但是在IE8或更低版本中不支持Array.prototype.indexOf。 jQuery.index（）函數可以用來替代（如果需要） – jessegavin

您需要創建一個包含所有包裝的數組以及跟蹤數組中當前位置的方法。

像下面這樣。 See a Demo

$j(document).ready(function() { 
    var wrappers = $j("[id^=wrap]").hide(); 
    var length = wrappers.length; 
    var index = -1; 
    setInterval(function() { 
     next = index + 1; 
     if (next === wrappers.length) { 
      next = 0; 
     } 
     wrappers.eq(index).hide(); 
     wrappers.eq(next).show(); 
     index++; 
     if (index == wrappers.length) { 
      index = 0; 
     } 
    }, 3000); 
});

來源

2014-04-08 14:00:58 jessegavin

不應該選擇是^ =？ – Alex

是的，我已經糾正它 – jessegavin

Wrap0沒有在開始顯示，它開始於wrap1。其餘的腳本工作得很好。 – Prastow

-1

你要做的是給每個div分配一個類，然後控制是否隱藏或顯示類名稱而不是ID。

<div id="wrap0" class="wrap"></div> 

$j('.wrap').toggle('show');

來源

2014-04-08 14:02:22

這很重要嗎？我可以選擇是否隱藏/顯示ID或課堂上的權利？我不明白它是如何解決隱藏/顯示動態生成的div。 – Prastow

你可以嘗試喜歡的東西很簡單：

<div id="wrap0">Fixed text0</div> 
<div id="wrap1">Fixed text1</div> 
<div id="wrap2">Fixed text2</div> 
<div id="wrap3">Fixed text3</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
var i = 0; 
var numberOfWraps = 3; //value from SQL query 
for (var j = i+1; j<=numberOfWraps; j++){ 
    $('#wrap'+j).toggle('hide'); 
} 
setInterval(function() { 
    if (i !== numberOfWraps){ 
    $('#wrap'+(i+1)).toggle('show'); 
    $('#wrap'+i).toggle('hide'); 
    i = i+1; 
    } 
    else{ 
    $('#wrap'+numberOfWraps).toggle('hide'); 
    i = 0; 
    $('#wrap'+i).toggle('show');  
    } 
}, 3000); 
}); 
</script>

來源

2014-04-08 14:13:53

自動顯示和隱藏多個div

回答

編輯

相關問題