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

Question

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

| 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"。我想要做的是将数据属性 "data-opt" 附加到另一个 div onclick，但如果用户更改了他选择的内容，我还需要替换已经附加的内容。例如，用户在 "question 1" 上单击 "option 1"，但随后他决定用 "option 2" 更改他的选择。另一种情况——用户用 "option 1" 回答 "question 1"，用 "option 2" 回答 "question 2"，用 "option 3" 回答 "question 3"，但随后他将答案更改为 "question 1" 和 "option 3" - 我只想更改 "question 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/

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

Append one of three data attributes to element but replace what is already appended

jquery

append