Пробуя функции пространства имен Jquery: Синтаксис Проблема - PullRequest
Новая
       18

Пробуя функции пространства имен Jquery: Синтаксис Проблема

0 голосов
/ 15 ноября 2011

Я пытаюсь изменить свой подход к написанию 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).

Вот мой ООП подход к проблеме. 

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>

Это весь код, который я пробую.

Ответы [ 5 ]

0 голосов
/ 16 ноября 2011

Существуют многочисленные опечатки, препятствующие этому: Ratings не определено в RatingsBar.Calculate('#container', Ratings, 5) пропущенных точках с запятой в переменной в функции Calculate.

Итак, я просто реорганизовал его так, как я это сделал бы. 

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 произведений.Для меня это стало более логичным.

0 голосов
/ 16 ноября 2011 
    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);

Попробуйте это, оно должно работать. Основная проблема заключалась в том, что вы привязали функцию к документу, готовому после этого события: -)

Другое дело, что пропущено несколько точек с запятой.

Я не совсем уверен, что RatingBar.fadeOptions.slow был определен в это время, поэтому я немного изменил ваш интервал имен.

0 голосов
/ 16 ноября 2011

Может быть, это будет работать, трудно сказать без рабочего тестового примера. 

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 и опубликуйте ссылку.

Редактировать: Что такое рейтингидолжно быть (второй аргумент в вызове вашей функции)?Замените Ratings любым значением или определите переменную Ratings, и приведенный выше код работает.

0 голосов
/ 16 ноября 2011

Как насчет параметра Рейтинги? Замените его на одно число, чтобы увидеть ... 

RatingsBar.Calculate('#container', 10, 5)
0 голосов
/ 15 ноября 2011

Попробуйте jsHint codechecker

Я уже проверил код для вас, вот отчет: http://www.jshint.com/reports/65020

Вы пропустили круглые скобки заоператор функции: 

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

Исправьте синтаксические ошибки и повторите код;)

...