javascript - 如何将“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;
}