javascript - 「div」コンテンツを配列に分割し、配列の最初のインデックスを表示してから、ユーザーが矢印をクリックして次のインデックスを表示できるようにするにはどうすればよいですか?

Question

私が持っているとしましょう<div class="list">Cheese/Beans/Chili Powder</div>。

これをユーザーに表示したい：<div class="list">Cheese</div>そして、ユーザーが矢印をクリックして変更し<div class="list">Beans</div>、別の矢印をクリックして元に戻すことができるようにします。

私がそれをするのを手伝ってくれませんか？

Answer 1

正しく行う方法は次のとおりです（リスト付き）：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;
}

Answer 2

これで始められるはずです。

あなたのリストが.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/-要素をクリックしてアイテムを循環します