开发者

Help with using jquery to replace radioboxes with divs

开发者 https://www.devze.com 2023-02-03 23:30 出处:网络
I\'d trying to use the jquery.imagetick.min.js plugin (http://ajaxdump.com/?DgyQHXJO) to replace my radioboxes with divs of different colors.

I'd trying to use the jquery.imagetick.min.js plugin (http://ajaxdump.com/?DgyQHXJO) to replace my radioboxes with divs of different colors.

How can i modify the jquery to show the correct color for each box displayed? At the moment i can get them all to display a single color but am unsure how to get them tI'm a little stuck!

  <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="re开发者_开发技巧d" 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>


Instead of this

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

try this

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

精彩评论

暂无评论...
验证码 换一张
取 消