사용자 정의 스타일 의 단일 선택, 다 중 선택 단추 논리

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