调用类与JavaScript - 什么也没有发生

我正在用javascript构建一个星级评分系统。我试图访问一个php页面中的类名称。理想情况下，它应该会导致星星在鼠标悬停时改变颜色，但是当我这样做时没有任何事情发生。调用类与JavaScript - 什么也没有发生

的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>

来源

2012-02-21 Brian Byrne

说PHP。向我们展示HTML。 'd_ಠ – Raynos 2012-02-21 23:45:33

我会在你的标签中包含框架...这看起来像jQuery。 – 2012-02-21 23:46:47

[JSHint只报告20错误，修复那些然后再试一次]（http://www.jshint.com/reports/184129） – Raynos 2012-02-21 23:47:41

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

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

来源

2012-02-21 23:46:29

仍然无法正常工作。请在原始文章中查看更新的代码。 – 2012-02-22 00:28:12

@BrianByrne检查jsfiddle链接，让我知道你在想什么。 – 2012-02-22 04:34:46

检查它，它也不在那里工作。嗯... http://jsfiddle.net/2p98h/1/ – 2012-02-22 10:33:32

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

来源

2012-02-21 23:47:54

这对于对象模式是有效的。在字符串中，你可以做background-position或backgroundPosition。 – 2012-02-21 23:54:42

$('.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。

来源

2012-02-21 23:48:15

仍然无法正常工作.. – 2012-02-22 00:24:44

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

http://jsfiddle.net/eviljackson/rwK3w/ - 与工作示例

希望这可以帮助您为您的文章帮我找出这个问题在我结束新小提琴有一个很好的一个... CSS下面是那么它包含在这个线程

the 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%; 
    }

来源

2012-03-12 06:35:49 eviljackson

调用类与JavaScript - 什么也没有发生

回答

相关问题