jquery - jQuery Star Rating Plugin ホバーで複数選択

Question

こんにちは、私はかなり長い間これをいじっていましたが、理解できません。3 つの評価項目 (品質、価値、サービス) を含むレビューページがあります。私は fyneworks jQuery Star Rating Plugin v4.11 を使用しており、ラジオ入力のタイトル (つまり、Poor、Good、Great) を表示するホバーオーバーエフェクトのアイデアが気に入っています。

私は次のことを達成しようとしています: 各評価の選択にカーソルを合わせて、その横にタイトルを表示できるようにします。評価が選択 (クリック) されたら、タイトルを永続的に表示したいと思います。Goole+ はこの種の機能を使用します。

これまでの私のコードは次のとおりです

jquery

<script type='text/javascript'>
        $(document).ready(function () {
            $('.hover-star').rating({
                focus: function (value, link) {
                    var tip = $('#hover-test');
                    tip[0].data = tip[0].data || tip.html();
                    tip.html(link.title || 'value: ' + value);
                },
                blur: function (value, link) {
                    var tip = $('#hover-test');
                    $('#hover-test').html(tip[0].data || '');
                }

            });
         });
    </script>

html

<div>
    <p>Service Rating</p>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="1" title="Very poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="2" title="Poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="3" title="OK"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="4" title="Good"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="5" title="Very Good"/>
    <span id="hover-test" style="margin:0 0 0 20px;"></span>
</div>

<div>
    <p>Value Rating</p>    
    <input class="hover-star" type="radio" name="test-3B-rating-2" value="1" title="Very poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-2" value="2" title="Poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-2" value="3" title="OK"/>
    <input class="hover-star" type="radio" name="test-3B-rating-2" value="4" title="Good"/>
    <input class="hover-star" type="radio" name="test-3B-rating-2" value="5" title="Very Good"/>
    <span id="hover-test-2" style="margin:0 0 0 20px;"></span>
</div>

<div>
    <p>Quality Rating</p>    
    <input class="hover-star" type="radio" name="test-3B-rating-3" value="1" title="Very poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-3" value="2" title="Poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-3" value="3" title="OK"/>
    <input class="hover-star" type="radio" name="test-3B-rating-3" value="4" title="Good"/>
    <input class="hover-star" type="radio" name="test-3B-rating-3" value="5" title="Very Good"/>
    <span id="hover-test-3" style="margin:0 0 0 20px;"></span>
</div>

私は立ち往生しており、続行する方法がわかりません。助けていただければ幸いです。ありがとうございました

score 0 · Accepted Answer

コピー＆ペーストしてみてください。これにより、この 1 つの html ファイルで必要なすべてが実行されます。

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Star Rating Plugin v4.11 (2013-03-14)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
</head>
<body>


<div class="Clear">&nbsp;</div>
<form id="form1">
<strong style='font-size:150%'>Stackoverflow Test</strong>
<table width="100%" cellspacing="10"> <tr>
<td valign="top" width="">
<table width="100%">
<tr>
<td valign="top" width="50%">
<div class="Clear">
<div id = "quality" class = "quality">
QUALITY:
</div>
<input class="star" type="radio" name="test-1-rating-1" value="Poor" title="Poor" />
<input class="star" type="radio" name="test-1-rating-1" value="Good" title="Good"/>
<input class="star" type="radio" name="test-1-rating-1" value="Great" title="Great"/>
</div>
<br/>
<div class="Clear">
<div id = "value" class = "value">
VALUE:
</div>
<input class="star" type="radio" name="test-1-rating-2" value="Poor" title="Poor""/>
<input class="star" type="radio" name="test-1-rating-2" value="Good" title="Good"/>
<input class="star" type="radio" name="test-1-rating-2" value="Great" title="Great"/>
</div>
<br/>
<div class="Clear">
<div id = "service" class = "service">
SERVICE:
</div>
<input class="star" type="radio" name="test-1-rating-3" value="Poor" title="Poor"/>
<input class="star" type="radio" name="test-1-rating-3" value="Good" title="Good"/>
<input class="star" type="radio" name="test-1-rating-3" value="Great" title="Great"/>
</div>

</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">

jQuery(document).ready(function ()
    {
        $("input[name='test-1-rating-1']").change(radioValueChanged1);
    })

    function radioValueChanged1()
    {
        radioValue = $(this).val();
        document.getElementById("quality").innerHTML = "QUALITY IS <b>"+radioValue+"</b>!";
       // alert(radioValue);
    } 

jQuery(document).ready(function ()
    {
        $("input[name='test-1-rating-2']").change(radioValueChanged2);
    })

    function radioValueChanged2()
    {
        radioValue = $(this).val();
        document.getElementById("value").innerHTML = "VALUE IS <b>"+radioValue+"</b>!";
       // alert(radioValue);
    } 

jQuery(document).ready(function ()
    {
        $("input[name='test-1-rating-3']").change(radioValueChanged3);
    })

    function radioValueChanged3()
    {
        radioValue = $(this).val();
        document.getElementById("service").innerHTML = "SERVICE IS <b>"+radioValue+"</b>!";
       // alert(radioValue);
    } 

</script>
</body></html>

score 0 · Accepted Answer

以下のようなコードを書いてみました。ハックのように見えますが、今のところ機能します。Google+ のレビューライティングがこれをどのように解決し、これにできるだけ近づけようとしたかが本当に気に入っています。私はどんな改善にもオープンです。

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Star Rating Plugin v4.11 (2013-03-14)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
</head>
<body>

<script type='text/javascript'>
        $(document).ready(function () {
            $('.hover-star').rating({
                focus: function (value, link) {
                    $("#hover-test").css("color", "#000");
                    var tip = $('#hover-test');
                    tip[0].data = tip[0].data || tip.html();
                    tip.html(link.title || 'value: ' + value);
                },
                blur: function (value, link) {
                    var tip = $('#hover-test');
                    $('#hover-test').html(tip[0].data || '');
                },

                click: function (value, link) {
                    var tip = $('#hover-test');
                    tip.empty();
                },

                callback: function(value, link){
                    var tip = $('#stick');
                tip[0].data = tip[0].data || tip.html();
                tip.html(link.title || 'value: ' + value);
                }

            });

            $(".hover-star").click(function () {
                $("#hover-test").css("color", "#ff6a00");

            });
         });
    </script>

<div>
    <p>Service Rating</p>
    <div>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="1" title="Very poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="2" title="Poor"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="3" title="OK"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="4" title="Good"/>
    <input class="hover-star" type="radio" name="test-3B-rating-1" value="5" title="Very Good"/>
</div>
    <div id="star-rating" style="position:relative;">
        <div id="stick" style="position:absolute;top:0px;left:200px;color:#ff6a00;"></div>
        <div id="hover-test" style="position:absolute;top:0px;left:200px;width:250px;background-color:#fff;"></div>
    </div>

</div>
  <br /><br />  

</body></html>

jquery - jQuery Star Rating Plugin ホバーで複数選択

2 に答える 2

Related

Reference