嘗試命名空間函數Jquery：語法問題

我試圖改變我的寫作方法，就像我用PHP做的那樣。這是舊的代碼，我檢查它的工作。嘗試命名空間函數Jquery：語法問題

$(document).ready(function(){ 

    var calculatetotalwidth = $('#container').width() 
    var calculatesegment = calculatetotalwidth/5 
    var calculaterating = calculatesegment * rating 

    $('#ratings .ratingbar').animate({width:calculaterating},1200); 
});

它只是將模仿進度將顯示我的評價，通過分割內容div的寬度和我選擇的範圍（在這種情況下5/5）把它一個動畫。

這是我對該問題的OOP方法。

var RatingsBar = { 

    fadeOptions: { 
    slow: 5000, 
    medium: 2500, 
    fast: 1200 
    }, 

    Calculate: function (contaierid, score, scope) { 

    $(document).ready(function() { 

     var calculatetotalwidth = $(contaierid).width() 
     var calculatesegment = calculatetotalwidth/scope 
     var calculaterating = calculatesegment * score 

     $('#ratings .ratingbar').animate({ 
     width: calculaterating 
     }, RatingsBar.fadeOptions.slow); 

    }); 

    } 
} 

RatingsBar.Calculate('#container', ratings, 5)

我在jqueryslideslidemenu插件中使用了源代碼模式。我似乎無法使其工作。我在這裏錯過了什麼嗎？

我得到了工作的東西。現在的問題是，我需要使用評分。我把它從一個PHP代碼在這裏：

class rating_system { 

    var $score; 

    function __construct($rate) { 
     $this->score = $rate; 
    } 

    function run_rate() { 
     $this->phptojava(); 
     echo $this->displayrate(); 
    } 


    function phptojava() { 
     echo '<script language="javascript" type="text/javascript"> var ratings ='. $this->score ."</script>"; 
    } 

    function displayrate() { 
     $wrapper = '<div id="ratings"><div class="ratingbar">'; 
     $wrapper = $wrapper . '<p>' . $this->score . '<p>'; 
     $wrapper = $wrapper . '</div>' . '<div class="blankrating">' . '<p>' . 'ratings' . '<p>'; 
     $wrapper = $wrapper . '</div></div>'; 

     return $wrapper; 
    } 

} 

$view = new rating_system(4);

謝謝大家。我設法讓它工作。

<html> 
<head> 

<?php 

    class rating_system { 

     var $score; 

     function __construct($rate) { 
      $this->score = $rate; 
     } 

     function run_rate() { 
      $this->phptojava(); 
      echo $this->displayrate(); 
     } 


     function phptojava() { 
      echo '<script language="javascript" type="text/javascript"> var ratings ='. $this->score ."</script>"; 
     } 

     function displayrate() { 
      $wrapper = '<div id="ratings"><div class="ratingbar">'; 
      $wrapper = $wrapper . '<p>' . $this->score . '<p>'; 
      $wrapper = $wrapper . '</div>' . '<div class="blankrating">' . '<p>' . 'ratings' . '<p>'; 
      $wrapper = $wrapper . '</div></div>'; 

      return $wrapper; 
     } 

    } 

    $view = new rating_system(2); 
?> 

<script type="text/javascript" src="jquery.js" ></script> 
<script language="javascript" type="text/javascript"> 

var RatingsBar = { 
    fadeOptions: {slow:5000,medium:2500,fast:1200}, 
    calculate: function (contaierid, score, scope) { 
//  $(document).ready(function() { 
       var calculatetotalwidth = $(contaierid).width(); 
       var calculatesegment = calculatetotalwidth/scope; 
       var calculaterating = calculatesegment * score; 
       $('#ratings .ratingbar').animate({width:calculaterating}, RatingsBar.fadeOptions.fast); 
//   });//end ready function 
    }//End Calculate Function 
} //end object 

$(document).ready(function() { 
    RatingsBar.calculate('#container',ratings,5); 

}); 

</script> 

<style type="text/css"> 

#container { 
    height:500px; 
    width:720px; 

} 

#ratings { 
    width:720px; 
    height:75px; 
    position:relative; 

    float:left; 
} 

#ratings .ratingbar { 
    width:0px; 
    border: 1px #910000 solid; 
    height: 100%; 
    float:left; 
    text-align:right; 
    background-image: linear-gradient(bottom, #A62E10 47%, #F52D00 82%); 
    background-image: -o-linear-gradient(bottom, #A62E10 47%, #F52D00 82%); 
    background-image: -moz-linear-gradient(bottom, #A62E10 47%, #F52D00 82%); 
    background-image: -webkit-linear-gradient(bottom, #A62E10 47%, #F52D00 82%); 
    background-image: -ms-linear-gradient(bottom, #A62E10 47%, #F52D00 82%); 

    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0.47, #A62E10), 
     color-stop(0.82, #F52D00) 
    ); 

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A62E10', endColorstr='#F52D00'); 
} 

#ratings .blankrating { 
    text-align:left; 
} 

</style> 

</head> 

<body> 

<div id="container"> 

<?php echo $view->run_rate(); ?> 

</div> 
</body> 
</html>

這是我正在嘗試的整個代碼。

來源

2011-11-15 Mr A

這是有效的命名空間函數，而不是OOP：P – Esailija

哦。謝謝，但爲什麼它不工作？ –

很難說..什麼是「評級」..它不在代碼中 – Esailija

也許這會工作，很難告訴沒有一個工作測試用例。

var RatingsBar = { 

    fadeOptions: { 
    slow: 5000, 
    medium: 2500, 
    fast: 1200 
    }, 

    Calculate: function (contaierid, score, scope) { 
     var calculatetotalwidth = $(contaierid).width(); 
     var calculatesegment = calculatetotalwidth/scope; 
     var calculaterating = calculatesegment * score; 

     $('#ratings .ratingbar').animate({ 
     width: calculaterating 
     }, RatingsBar.fadeOptions.slow); 
    } 
}; 

$(document).ready(function() { 
    RatingsBar.Calculate('#container', Ratings, 5); 
});

嘗試在jsfiddle.net上重現您的問題併發布鏈接。

編輯：什麼是評級應該是（你的函數調用中的第二個參數）？用任何值替換評分，或者定義評分變量和上面的代碼。

來源

2011-11-15 23:37:23 dom

這工作。當我刪除屬性內部的ready函數時，它從PHP變量中獲取評分變量。 –

嘗試jsHint codechecker

我已經檢查的代碼對你來說，這裏是報告： http://www.jshint.com/reports/65020

你已經錯過了功能句話背後的圓括弧：

Line 4: $(document).ready(function { 
Expected '(' and instead saw '{'.

請修復語法錯誤並重新發布代碼;）

來源

2011-11-15 15:58:31

修復了錯誤。它不工作。 –

評分參數怎麼樣？取代它的一個數字看...

RatingsBar.Calculate('#container', 10, 5)

來源

2011-11-15 23:43:47

它工作。但我需要收視率變數。我擴展瞭如何獲得收視率變量的代碼庫。 –

var ratingsBar = {}; 

    ratingsBar.fadeOptions: { 
     slow: 5000, 
      medium: 2500, 
      fast: 1200 
     }; 

    ratingsBar.calculate: function (contaierid, score, scope) { 

      //$(document).ready(function() { 

       var calculate 

totalwidth = $(contaierid).width(), 
       calculatesegment = calculatetotalwidth/scope, 
       calculaterating = calculatesegment * score; 

      $('#ratings .ratingbar').animate(
       { 
        width:calculaterating 
       }, 
       ratingsBar.fadeOptions.slow 
      ); 

     //}); 

    }; 

ratingsBar.calculate('#container', Ratings, 5);

試試這個，它應該工作。主要問題在於，在此事件之後，您將函數綁定到文檔準備就緒： - ）

另一件事是缺少幾個分號。

我不完全確定ratingsBar.fadeOptions.slow是在這個時候定義的，所以我改變了一點你的名字間距。

來源

2011-11-15 23:48:42

有許多錯別字防止這種工作： Ratings在RatingsBar.Calculate('#container', Ratings, 5) 失蹤分號未定義上的計算功能的變種。

所以，我只是將它重構爲我將如何去做。

var RatingsBar = { 
    speeds: { 
     slow: 5000, 
     medium: 2500, 
     fast: 1200 
    }, 
    calculate: function (container, score, outOf) { 
     var $container = $(container), 
      ratio = score/outOf, 
      rating = Math.floor($container.width() * ratio); 

     $container.find('.ratingbar').animate({width: rating}, this.speeds.slow); 
    } 
}; 

$(document).ready(function() { 
    var score = 2, 
     outOf = 5; 

    RatingsBar.calculate('#container', score, outOf); 
});

HTML

<div id="container"> 
    <div class="ratingbar"></div> 
</div> 

#container { 
    position: relative; 
    height: 30px; 
    width: 250px; 
    border: 1px solid #cccccc; 
    padding: 1px; 
}

CSS

#container .ratingbar { 
    height: 100%; 
    width: 0px; 
    background-color: blue; 
}

無論哪種方式計算.ratingbar作品的寬度。這對我來說更有意義。

來源

2011-11-16 00:08:24 natedavisolds

它沒有定義。我放置了從PHP對象傳遞的變量。 –

如果您將準備好的功能放在腳本中，而不是像您所說的那樣，那麼它們有什麼區別？ –

@MrA - 我認爲將計算評級與加載事件分開的功能更爲簡潔。它允許您在需要使用ajax進行更新時隨時運行RatingsBar.Calculate。通過將它拉出來，RatingsBar對象僅對自身做出反應。 – natedavisolds

嘗試命名空間函數Jquery：語法問題

回答

相關問題