Question

我正在尝试改变我编写javascript的方法，就像我使用PHP一样。这是我检查它的旧代码。

$(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>

这是我正在尝试的整个代码。

Answer 1

尝试jsHint codechecker

我已经为您检查了代码，这是报告： http://www.jshint.com/reports/65020

您错过了函数声明后面的圆括号：

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

请修复语法错误并再次发布代码;）

Answer 2

如果没有正常工作的测试用例，这可能会很有效。

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上复制你的问题并发布链接。

编辑：评分应该是什么（函数调用中的第二个参数）？将评级替换为任何值或定义评级变量，上面的代码可以工作。

Answer 3

评级参数怎么样？将其替换为一个数字以查看...

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

Answer 4

    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，所以我改变了你的名字间距。

Answer 5

有许多错别字阻止这项工作： Ratings中未定义RatingsBar.Calculate('#container', Ratings, 5) 计算函数中的var上缺少分号。

所以，我只是重构了它是如何做到的。

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作品的宽度。这对我来说更有意义。

尝试命名空间函数Jquery：语法问题

5 个答案: