自定义样式的单选、多选按钮逻辑

首选全局声明一个对象，用来储存所有题的答案

var answerData = {
'q1':'',
'q2':''
}

单选题

<div class="q1">
<div class="qImg"></div>//选项是否被选中图片
<div class="qBody">
<div class="question">请问您的性别是?</div>
<div class="answer">
<div class="coin"></div>
<div class="cont single" data-num="q1" data-ans="A">A.男</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont single" data-num="q1" data-ans="B">B.女</div>
</div>
</div>
</div>

function single(){
var node = $(this).parent().children()[0],
nextNode = $(this).parent().children()[1],
nodeNum = $(nextNode).attr('data-num'),
nodeVal = $(nextNode).attr('data-ans'),
bg = node.style.backgroundImage || 'url(coin0.png)',
//获取选项的状态,默认为进入页面时的未选择(coin0.png:未选择时的图片样式)
isChoice = bg.indexOf('coin0.png'),
other = $(this).parent().parent().children('.answer').children('.coin');
$(other).css('background-image', 'url(coin0.png)');
//首先将所有选项重置为未选择
if (isChoice > 0) {
$(node).css('background-image', 'url(coin.png)');
answerData[nodeNum] = nodeVal;
} else {
$(node).css('background-image', 'url(coin0.png)');
answerData[nodeNum] = '';
}
//将单选答案存进对象,如果重置前是已选状态则变为未选状态，反之亦然
}
$('.single').on('c
b9df
lick',single);

多选题

<div class="q2">
<div class="qImg"></div>
<div class="qBody">
<div class="question">对于七座MPV,您认为您最看重的因素有哪些?(最多选三项)</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="A">A.租赁价格</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="B">B.空间大小</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="C">C.操作性能</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="D">D.乘坐舒适度</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="E">E.车辆状况</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="F">F.油耗大小</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="G">G.汽车外观</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="H">H.噪音小</div>
</div>
<div class="answer">
<div class="coin"></div>
<div class="cont more" data-num="q2" data-ans="I">I.其他</div>
</div>
</div>
</div>

function more(){
var node = $(this).parent().children()[0],
nextNode = $(this).parent().children()[1],
nodeNum = $(nextNode).attr('data-num'),
nodeVal = $(nextNode).attr('data-ans'),
bg = node.style.backgroundImage || 'url(coin0.png)',
//获取选项的状态,默认为进入页面时的未选择
isChoice = bg.indexOf('coin0.png'),
moreArr = answerData[nodeNum];
if (isChoice > 0) {
if (moreArr.size < 3) {
moreArr.add(nodeVal);
answerData[nodeNum] = moreArr;
$(node).css('background-image', 'url(coin.png)');
} else {
return false;
}
} else {
moreArr.delete(nodeVal);
$(node).css('background-image', 'url(coin0.png)');
}
}
$('.more').on('click',more);