2011-01-14 9 views
0

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> 

答えて

0

みました...これは何もまったく現れないこの

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

が試してみてください:\t \t \tリターン '

'; divを表示しても最初の色はすべて – Simon

+0

のままですが、ラジオボタンは右に消えますか? '$ label'の代わりに' $(this) 'を試してください – jcolebrand

関連する問題