2012-02-21 48 views
0

我正在用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> 
+4

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

+0

我會在你的標籤中包含框架...這看起來像jQuery。 – 2012-02-21 23:46:47

+1

[JSHint只報告20錯誤,修復那些然後再試一次](http://www.jshint.com/reports/184129) – Raynos 2012-02-21 23:47:41

回答

0

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

試試這個,你有一些語法錯誤。沒有背景很難測試。看看代碼,根據需要進行修改。

+0

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

+0

@BrianByrne檢查jsfiddle鏈接,讓我知道你在想什麼。 – 2012-02-22 04:34:46

+0

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

0

當使用jquery更新css使用backgroundPosition而不是background-position。它適用於每個css命令。

+2

這對於對象模式是有效的。在字符串中,你可以做background-position或backgroundPosition。 – 2012-02-21 23:54:42

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

+0

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

0

看着小提琴並添加與圖像的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%; 
    } 
相關問題