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>的数据属性中..让我们说＆＃34; data-opt＆＃34;。我想要做的是附加数据属性＆＃34; data-opt＆＃34;到另一个div onclick，但如果用户改变他所选择的内容，我还需要替换已经附加的内容。例如，用户点击＆＃34;选项1＆＃34;问题1＆＃34;问题1＆＃34;但随后他决定用＆＃34;选项2＆＃34;改变他的选择。另一种情况 - 用户回答＆＃34;问题1＆＃34;使用＆＃34;选项1＆＃34;，＆＃34;问题2＆＃34;用＆＃34;选项2＆＃34;和＆＃34;问题3＆＃34;用＆＃34;选项3＆＃34;但后来他将答案改为＆＃34;问题1＆＃34;用＆＃34;选项3＆＃34; - 我只想改变＃34;问题1和＃34;的答案并保留所有其他答案。

我已经能够实现的目标是只回答一次答案，但我不知道如果他做出更改，如何更改用户选择......

我认为我实际上可以实现它，但我希望尽可能保持简单，因为我不熟悉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/

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

1 个答案: