Question

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

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

答案写在数据权限数据属性中，如下所示：

<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时，在输入中的数据右侧继续添加一个字母。

我想我可以处理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++;
    });
});

在jquery中每次单击输出一个字母

2 个答案: