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 に答える