Question

我用javascript构建星级评分系统。我试图访问php页面中的类名。理想情况下，它应该让鼠标在鼠标悬停时改变颜色，但是当我这样做时什么也没发生。

jQuery的：

$(document).ready(function() {
    // put all your jQuery goodness in here.



                            $(function(){
                $('.star').mouseover(function (){
                    var star = $(this).index() 1;
                    $(this).parent().css("background-position","0 -" (32 * star) "px");
                });

                $('.star-rating').mouseout(function (){
                    var originalresult = $(this).attr('id').split('result')[1];
                    $(this).css("background-position","0 -" (32 * originalresult) "px");
                });
            });
});

HTML：

<div class="star-rating" id="rating1result0">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>
<div class="result">
    <span style="color:green">0</span> (0)
</div>

Answer 1

http://jsfiddle.net/2p98h/1/

试试这个，你有一些语法错误。没有背景就很难测试。根据需要查看代码进行修改。

Answer 2

使用jquery更新css时，请使用backgroundPosition而不是background-position。它适用于每个css命令。

Answer 3

$('.star').mouseover(function (){
            var star = $(this).index() 1;
            $(this).parent().css("backgroundPosition","0 -" + (32 * star) + "px");
            });

            $('.star-rating').mouseout(function (){
            var originalresult = $(this).attr('id').split('result')[1];
            $(this).css("backgroundPosition","0 -" + (32 * originalresult) + "px");
           });

在形成字符串时需要添加'+'，background-position应该是backgroundPosition。

Answer 4

在看完小提琴并添加带有图像的CSS后，它就像它应该的那样工作。我确实注意到当你尝试添加这个服务器端时出于某些原因我仍然得到额外的字符，即使我从小提琴复制并粘贴到记事本然后进入我的文档它似乎没有任何额外的空格或字符但是一旦它是在服务器上，我在jquery代码的末尾获得了3个额外的字符。我在服务器上编辑了文件，删除了3个额外的字符，使用了小提琴中提供的代码，效果很好。也许只是我的一个错误，但也许你的体验。

http://jsfiddle.net/eviljackson/rwK3w/ - 工作示例的新小提琴

希望这可以帮到你，因为你的帖子帮助我弄清楚我的问题有一个很好的问题... css在下面所以它包含在这个帖子中

css

    .star-rating {
     width:80px;
     height:16px;
     float:left;
     background:url(http://i39.tinypic.com/2cntjsl.png);
     cursor:pointer;
     }
     .star {
     width:16px;
     height:16px;
     float:left;
     }
     .result {
     float:left;
     height:16px;
     color:#454545;
     margin-left:5px;
     line-height:110%;
     }

使用javascript调用类 - 没有任何反应

4 个答案: