Question

我使用了分级功能，并且想复制该功能以在同一页面上多次使用。我无法获得功能重复的产品。对我可以做什么或可以对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;
    }

评级功能重复问题-JavaScript

0 个答案: