将三个数据属性中的一个附加到元素，但替换已经附加的内容

Question

我有一个div表，包含多个选项，每个选项有三个选项，如下所示：

| question 1 | option 1 | option 2 | option 3 |
| question 2 | option 1 | option 2 | option 3 |
| question 3 | option 1 | option 2 | option 3 |

等等。。。

每个选项都在具有数据属性的<div>中。。比方说"数据选择"。我试图做的是将数据属性"data-opt"附加到另一个div onclick，但如果用户更改了所选内容，我也需要替换已经附加的内容。例如，用户单击"问题1"上的"选项1"，但随后他决定用"选项2"更改选择。另一种情况-用户用"选项1"回答"问题1"，用"选项2"回答"问题2"，用"选项3"回答"问题3"，但随后他用"选项3"将答案更改为"问题1"-我只想更改"问题1"的答案，并保留所有其他答案。

我已经能够实现的是只添加一次答案，但如果用户做出更改，我不知道如何更改用户选择。。。

我认为我实际上可以实现它，但我想让它尽可能简单，因为我对jquery不太熟悉，我将不得不编写几个函数，我的代码将变得一团糟。

这就是我已经知道的：

$(document).ready(function() {
$(document).one('click',function(event){
    choice = $(event.target).data('opt');
    $('#another').append(choice);
});
});

http://jsfiddle.net/8vpm1gck/

Answer 1

$(document).ready(function() {
$('body').on('click','.cell',function(event){
        choice = $(this).data('opt');
        if($('div[data-question="'+$(this).parent().index()+'"]').length == 0)
        $('#another').append('<div data-question="'+$(this).parent().index()+'">'+choice+'</div>');
        else {
        $('div[data-question="'+$(this).parent().index()+'"]').text(choice);
        }
});
});

http://jsfiddle.net/771L1zaa/