jQuery星级 - 悬停多行

时间:2012-03-03 16:49:38

标签: jquery hover row rating

对于PHP / JAVA,我是一个新手,但是,尽管如此,我在我的网站上运行了jQuery星级评分插件,并在我悬停时显示星星旁边的文字。

现在我想添加另一排星星,但我只希望文本显示我正在悬停的行。

实施例 ROW 1 Stars - HOVER TEXT ROW 2 Stars - HOVER TEXT

当我悬停第1行或第2行时,文本将显示在两行中。知道如何解决这个问题。

标题中的Java代码

<script>
jQuery(function($) {
    $('.wesley').rating({
        focus: function(value, link) {
            // 'this' is the hidden form element holding the current value
            // 'value' is the value selected
            // 'element' points to the link element that received the click.
            var tip = $('#hover-test, #hover-test2');
            tip[0].data = tip[0].data || tip.html();
            tip.html(link.title || 'value: ' + value);
        },
        blur: function(value, link) {
            var tip = $('#hover-test');
            $('#hover-test, #hover-test2').html(tip[0].data || '');
        }
    });
});​
</script>

显示文字的内容是明星旁边的

<span id="hover-test2" style="margin:0 0 0 20px;">Hover tips will appear in here</span>

1 个答案:

答案 0 :(得分:0)

在我看来,您在错误的地方有以下代码,您需要在匹配类名称的星号下方直接使用匹配的span#hover-text。

<div id="frm_bg_star">
<label class="frm_primary_label">
Beoordeel<span class="frm_required">&nbsp*</span>
    <div class="frm_description">Beoordeel de verschillende aspecten van Relatieplanet.nl</div>
 </label>
<div id="star-rating-top"><div id="star-rating-word"><a class="tooltip">
   <img src="/wp-content/themes/Hector/images/icon_tooltip.gif"></img>&nbsp
<span>Hoe was het aanbod van profielen. Waren deze actief en had je het vermoeden of dit geen nep-profielen waren? </span>
</a>Singles Aanbod</div><div id="star-rating"><div class="alignleft frm_10radio ">
<input type="radio" name="item_meta[26]" id="field_26-1" value="Option 1 text"   class="scale required wesley star" />
</div>   
<div class="alignleft frm_10radio ">
<input type="radio" name="item_meta[26]" id="field_26-2" value="Option 2 text"   class="scale required wesley star" />
</div>   
<div class="alignleft frm_10radio ">
<input type="radio" name="item_meta[26]" id="field_26-3" value="Option 3 text"   class="scale required wesley star" />
</div>   
<div class="alignleft frm_10radio ">
<input type="radio" name="item_meta[26]" id="field_26-4" value="Option 4 text"   class="scale required wesley star" />
</div>   
<div class="alignleft frm_10radio  frm_last">
<input type="radio" name="item_meta[26]" id="field_26-5" value="Option 5 text"   class="scale required wesley star" />
</div>   
<div style="clear:both;"></div></div>
<span id="hover-test" style="margin:0 0 0 20px;"></span>
</div>
<div style="clear:both;"></div></div>
</div></div>