jquery를 사용하여 라디오 박스를 div로 대체하는 것에 대한 도움말

jquery.imagetick.min.js 플러그인 (http://ajaxdump.com/?DgyQHXJO)을 사용하여 라디오 박스를 다양한 색상의 div로 대체하려고합니다.jquery를 사용하여 라디오 박스를 div로 대체하는 것에 대한 도움말

표시되는 각 상자에 올바른 색상을 표시하도록 jquery를 어떻게 수정할 수 있습니까? 순간 나는 그들 모두에게 단 하나의 색깔을 보여줄 수는 있지만 그것들을 얻는 방법을 확신 할 수 없다. 나는 약간 붙어있다! 대신이

return '<div class="custom-radio yellow_box"></div>';

의

<html> 
    <head> 
    <title></title> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery.imagetick.min.js"></script> 
    <script type="text/javascript"> 

    // Apply styling to radio boxes for color selector 

    $(function(){  
     $("input[name='color_select']").imageTick({ 
      custom_button: function($label){ 
       $label.hide(); 
       return '<div class="custom-radio yellow_box"></div>'; 
      } 
     }); 

    }); 

    </script> 

    </head> 

    <style> 

    #container { 
     margin: 50px; 
    } 

    .custom-radio { 
     margin-right: 3px; 
     padding: 20px; 
     display: inline; 
    } 
    .custom-radio.selected { 
     border: 5px solid black; 
    } 

    .purple_box { 
     background-color: #9873da; 
    } 

    .blue_box { 
     background-color: #77abcc; 
    } 

    .red_box { 
     background-color: #cf444c; 
    } 

    .yellow_box { 
     background-color: #fbc239; 
    } 

    .orange_box { 
     background-color: #ee8d13; 
    } 

    .green_box { 
     background-color: #66c516; 
    } 

    </style> 

    <body> 

    <div id="container"> 

    <input type="radio" id="yellow" name="color_select" value="yellow" class="custom-radio yellow_box" checked/> 
    <input type="radio" id="orange" name="color_select" value="orange" class="custom-radio orange_box" /> 
    <input type="radio" id="red" name="color_select" value="red" class="custom-radio red_box" /> 
    <input type="radio" id="green" name="color_select" value="green" class="custom-radio green_box" /> 
    <input type="radio" id="blue" name="color_select" value="blue" class="custom-radio blue_box" /> 
    <input type="radio" id="purple" name="color_select" value="purple" class="custom-radio purple_box" /> 

    </div> 

    </body> 
    </html>

출처

2011-01-14 Simon

시도 ...이 아무것도 아예 표시되지 않습니다이

return '<div class="' + $label.attr('class') + '"></div>';

출처

2011-01-14 03:01:40 jcolebrand

시도하려고 : \t \t \t 복귀 '

'; divs를 표시하지만 여전히 모든 첫 번째 색 – Simon

을 남겨 둡니다.하지만 라디오 버튼이 사라집니다. '$ label' 대신'$ (this)'를 사용하십시오. – jcolebrand

jquery를 사용하여 라디오 박스를 div로 대체하는 것에 대한 도움말

답변

관련 문제