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

DEMO：http://jsfiddle.net/8Fc9w/

Answer 2

我比Rocket更喜欢Rocket的答案。但是如果你发现它有用的话还有另外一种方法。

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

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

2 个答案: