Question

大家好，我已经用了很长时间修补了这个问题，无法弄明白。我有一个评论页面，有3个评级选择（质量，价值，服务）。我正在使用fyneworks jQuery星级评级插件v4.11，并喜欢悬停在效果上的想法，显示无线电输入的标题（即差，好，伟大）。

我正在尝试完成以下操作：能够将鼠标悬停在每个评级选项上并在其旁边显示标题。选择（点击）评级后，我希望永久显示标题。 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>

我被困住了，不知道继续任何帮助将不胜感激。谢谢

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>

Answer 2

我最终编写了如下代码。它似乎是一个黑客，但它现在有效。我真的很喜欢谷歌+评论写作如何解决这个问题，并试图尽可能地接近这一点。我愿意接受任何改进。

<!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星级评分插件悬停多个选项

2 个答案: