Question

我有一些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');
            }
        );

感谢您的帮助。

Answer 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>

在这里完成测试代码，试一试

jquery设置前一个div类

1 个答案: