单击右箭头时如何更改值？

Question

当我点击右箭头时,数组的下一个元素应该显示在输入区域？

$(function(){
    var room = ['1-visiting office', '2-', '3-'];       
    $('#text_holder').val(room[0]);

    $("#rightarrow").click(function(){      
        $('#text_holder').val(room[next]);      
    });
});

这是我的HTML代码

<input id="text_holder" name="text_holder"/>
<img src="dev/images/rightarrow.jpg" id="rightarrow" />

Answer 1

数组没有next功能或任何东西,你需要自己跟踪计数器.

这是一种方法,使用jQuery data将计数器存储在按钮上.

$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    $('#text_holder').val(room[0]);

    $("#rightarrow").data('counter', 0).click(function(){
        var counter = $(this).data('counter')+1;
        $('#text_holder').val(room[counter]);
        $(this).data('counter', counter);
    });
});

如果要在结束后再次循环,可以使用%(模数)运算符.

$(function(){
    var room = ['1-visiting office', '2-', '3-'];
    $('#text_holder').val(room[0]);

    $("#rightarrow").data('counter', 0).click(function(){
        var counter = ($(this).data('counter')+1) % room.length;
        $('#text_holder').val(room[counter]);
        $(this).data('counter', counter);
    });
});

演示:http://jsfiddle.net/8Fc9w/