0

我有一些 jQuery 将图像设置为星级系统的单选按钮。我希望包含一个功能，当用户单击单选按钮时，图像更改为选中，并且之前的收音机也更改为选中。

我设法更改了选中按钮的类，并且我有一些代码也可以更改先前按钮上的类，但使用更简单的 div 结构。我已经能够将两者结合起来。

更改单选按钮类的代码

$(function() {
    $('input:radio').each(function() {
        $(this).hide();
        $('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this);
    });
    $('.radio-fx').live('click',function(e) {
        e.preventDefault();
        $check = $(this).prev('input');
        var unique = '.'+this.className.split(' ')[1]+' div';
        $(unique).attr('class', 'radio');
        $(this).find('div').attr('class', 'radio-checked');
        $check.attr('checked', true);
    });

});

html:

                  <div class="voteGroup">
                        <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                            <div class="radio-checked"></div>
                        </a>
                        <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                             <div class="radio"></div>
                        </a>
                        <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                              <div class="radio"></div>
                        </a>

                    </div>

我尝试集成以将以前的代码设置为在悬停时检查的代码：

        $('.radio-fx').hover(
            // Handles the mouseover
            function() {
                $(this).prevAll().andSelf().addClass('radio-checked');
                $(this).nextAll().removeClass('radio');
            },
            // Handles the mouseout
            function() {
                $(this).prevAll().andSelf().removeClass('radio');
            }
        );

谢谢你的帮助。

4

1 回答 1

1 
<div class="voteGroup">
    <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
        <div class="radio"></div>
    </a>
    <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
         <div class="radio"></div>
    </a>
    <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
          <div class="radio"></div>
    </a>
</div>
<style type="text/css">
    .radio-fx { float:left;margin:10px;}
    .radio-fx .radio{ background:#ff0; width:20px; height:20px;}
    .radio-checked .radio{ background:#f0f;}
</style>
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.addClass('radio-checked').prevAll().addClass('radio-checked');
            $self.nextAll().removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for?
    });
});
</script>

完整的测试代码在这里，试一试

于 2012-04-24T00:52:15.617 回答