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

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

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