Рейтинг Функция дублирования выпуска - JavaScript - PullRequest
Новая
       38

Рейтинг Функция дублирования выпуска - JavaScript

1 голос
/ 01 июля 2019

Я использовал функцию оценки и хочу дублировать эту функцию, чтобы использовать ее более одного раза на одной странице.Я не могу получить функциональный дубликат для работы.Любые идеи о том, что я могу сделать или какие-либо изменения, которые я мог бы внести в Javascript?

Я использую следующий HTML-код для отображения функции рейтинга, который публикует результат на другой странице.Функции оценки позволяют пользователю выбирать оценку от 1 до 10, и значок эмоции изменяется.Оригинал можно увидеть здесь .. https://www.jqueryscript.net/other/Slider-Rating-System.html

<div class='sliderholder'>
  <div class='sliderholderinside'>
     <div class="slider">
       <div class="ui-slider-handle">
           <div class="smiley">
             <svg viewBox="0 0 34 10" version="1.1">
                <path d=""></path>
             </svg>
           </div>
       </div>
       <div class="text">                                                       
          <strong></strong>                                                             
             <form method='POST' name='formnumbers'  action='ratingcomplete.php' onsubmit='DoSubmit();' enctype='multipart/form-data'>                                  
                <textarea style='display:none;' type='text'  name='numinput' id='numinput'><strong></strong></textarea>
                <input type='submit' value='Add rating' class='btn btn-secondary goldbtn'/>                     

            </form>         
        </div>
     </div>
  </div>
</div>

Вот javascript, есть ли способ дублировать этот скрипт, чтобы контролировать второй рейтинг функции.У меня нет успеха от создания дубликата, изменения имен классов в css, html и javascript. 

        var step = 10;
    $(".slider").each(function () {
        var self = $(this);
        var slider = self.slider({
            create: function () {
                self.find('.text strong').text(self.slider('value'));
                setPathData(self.find('.smiley').find('svg path'), self.slider('value'));
                DoSubmit(self.find('.smiley').find('svg path'), self.slider('value'));
            },
            slide: function (event, ui) {
                self.find('.text strong').text(ui.value);
                setPathData(self.find('.smiley').find('svg path'), ui.value);
                DoSubmit(self.find('.smiley').find('svg path'), ui.value);
            },
            range: 'min',
            min: 1,
            max: step,
            value: 1,
            step: 1 });
    });

    function setPathData(path, value) {
        var firstStep = 6 / step * value;
        var secondStep = 2 / step * value;
        path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));
    }

    function DoSubmit(path, value){
        var firstStep = 6 / step * value;
        var secondStep = 2 / step * value;
        path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));

      document.formnumbers.numinput.value = value;
      return true;
    }
...