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

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

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

单选题

dom结构：

<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>

javascript:

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('click',single);

多选题

dom结构:

<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>

javascript:

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);