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

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功能或任何东西，您需要自己跟踪计数器。

这是一种方法，使用 jQuerydata将计数器存储在按钮上。

$(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);
    });
});

如果您想在结束后再次循环，您可以使用%(modulus) 运算符。

$(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/

Answer 2

我喜欢火箭的回答胜过我的。但是，如果您发现它有用，这里还有 1 种方法。

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