Javascript jquery设置上一个div类

我有一些jQuery，它将图像设置为星级评定系统的单选按钮。我希望包括一个功能，当用户点击单选按钮时，图像变为选中，之前的收音机也变为选中

我已经设法更改了checked按钮的类，并且我有一些代码可以更改前面按钮上的类，但是在一个更简单的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);
    });

});

谢谢您的帮助。

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

.radio fx{浮点：左；边距：10px；}
.radio fx.radio{背景：ff0；宽度：20px；高度：20px；}
.无线电已检查。无线电{背景：#f0f；}
$（函数（）{
$（'.radio fx'）.live（“mouseenter”，function（）{//处理鼠标悬停
var$self=$（本）；
$self.addClass（'radio-checked'）.prevAll（）.addClass（'radio-checked'）；
$self.nextAll（）.removeClass（'radio-checked'）；
}).live（“mouseout”，function（）{//处理mouseout
$（this.removeClass（'radio'）.prevAll（）.removeClass（'radio'）；//这是干什么用的？
});
});

---

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

谢谢你的回复，我已经试过了，注意到它不会在悬停时触发，我已经在文档中准备好了。我在里面放了一个警告，看它没有被调用，这可能就是问题所在吗？谢谢，鼠标效果现在调用了，但是它改变了一个标记类。我正在尝试更改设置为radio的内部div类，并将其更改为radio checked抱歉，刚才看到代码中的最后一条注释。当鼠标移开时，收音机会回到原来的课堂

        $('.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');
            }
        );

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