如何將`div`內容拆分爲數組，顯示數組的第一個索引，然後允許用戶單擊箭頭以顯示下一個索引？

Question

可以說我有<div class="list">Cheese/Beans/Chili Powder</div>。

我想將此顯示給用戶：<div class="list">Cheese</div>，然後允許用戶單擊箭頭將其更改爲<div class="list">Beans</div>並使用其他箭頭將其更改回來。

有人能幫我做嗎？

Answer 1

這應該讓你開始。

假設你的列表是.list：

var l = $('.list') 
l.data('items', l.text().split('/')); 
l.data('current', 0); 

function display() { 
    l.text(l.data('items')[l.data('current')]); 
} 

function cycle() { 
    l.data('current', l.data('current')+1); 
    if(l.data('current') >= l.data('items').length) { 
     l.data('current', 0); 
    } 
    display(); 
} 

演示：http://jsfiddle.net/rAYxb/ - 通過項目單擊該部分可循環

Answer 2

這裏是你會怎麼做正確（與列表）： http://jsfiddle.net/TjFLY/1/

var data = "Cheese/Beans/Chili Power".split("/"), 
    list = $("<ul>").addClass("list"); 

for (var i = 0; i < data.length; i++) { 
    list.append($("<li>").text(data[i])) 
} 
list.children().eq(0).addClass("active"); 
$("<a>").attr("href", "#").addClass("prev").text("<").appendTo("body").click(function() { 
    var prev = $(".list .active").prev(); 
    if (prev.length) 
     $(".list .active").removeClass("active").prev().addClass("active"); 
}); 
$("body").append(list); 
$("<a>").attr("href", "#").addClass("next").text(">").appendTo("body").click(function() { 
    var next = $(".list .active").next(); 
    if (next.length) 
     $(".list .active").removeClass("active").next().addClass("active"); 
});​ 

用這個CSS來顯示/隱藏列表項：

.list li{ 
    display:none; 
} 
.list li.active{ 
    display:block; 
}