jquery - 在 jquery 中每次单击都会多输出一个字母

Question

我有一个测试，需要一个提示功能。

当用户点击提示时，答案的第一个字母必须写在输入字段中。如果他再次单击，则会添加第二个字母，依此类推。

答案写在 data-right data 属性中，如下所示：

<div class="question">
    <input class="input" type="text" placeholder="(gehen)" data-right="gegangen" />
    <div class="res"><b></b></div>
    <a class="hint">Hint</a>
</div>

问题，

最简单的方法是什么？基本上每次点击 .hint 时，都会在输入中的 data-right 中的答案中再添加一个字母？

我想我可以处理 DOM 导航，但不确定如何输出。

Answer 1

您可以使用 jQuery.data()方法获取data-*属性的值和.val()设置值的方法：

$('a.hint').on('click', function(event) {
    event.preventDefault();
    $(this).closest('.question').find('input').val(function(_, val){
        var i = val.length,
            right = $(this).data('right');

        if (right.indexOf(val) !== 0) return right.slice(0, 1); 
        return val + right.slice(i, i+1);
    })
})

http://jsfiddle.net/HN8gs/

Answer 2

您必须从属性http://jsfiddle.net/4T5Ng/读取数据

$(document).ready(function(){
    var dr =  $(".input").attr("data-right").split("");
    var index = 0;
    $(".hint").click(function(){
        if(index < dr.length)
        $(".input").val($(".input").val() + dr[index]);
        index++;
    });
});