1

当所有滑块值的总和超过阈值 80 时,我试图弹出警告。我不确定是否应该在 javascript 文件或 html 中执行此操作,我通过添加变量在这两个文件中进行了尝试exVal2 到 exVal15 但是当我移动滑块并且没有显示弹出窗口时它没有得到更新。

你能建议我怎么做吗?

滑块.html

    <div class = "row">


    <div class = "col-md-12">
    <div class = "col-md-4">

    <div class="wrapper">
    <hr />
    <p>
    AAAAAAAAAAAAA
    </p>

    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step=".1" style="text-align: center"/>
        <hr />
        <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />

    </div>
    </div>

    <div class = "col-md-4">

    <div class="wrapper">
    <hr />
    <p>
    BBBBBBBBBBBBBB
    </p>

        <input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step=".1" />
        <hr />
        <input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />

    </div>

    </div>

    <div class = "col-md-4">
    <hr />
    <div class="wrapper">
    <p>
    CCCCCCCCCCC
    </p>

        <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" />
        <hr />
        <input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
    <input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />

    </div>

    </div>
    </div>

滑块.js

      var $ex1 = $('#ex1');
      var $ex2 = $('#ex2');
      var $ex3 = $('#ex3');
      var $ex4 = $('#ex4');
      var $ex5 = $('#ex5');
      var $ex6 = $('#ex6');
      var $ex7 = $('#ex7');
      var $ex8 = $('#ex8');
      var $ex9 = $('#ex9');
      var $ex10 = $('#ex10');
      var $ex11 = $('#ex11');
      var $ex12 = $('#ex12');
      var $ex13 = $('#ex13');
      var $ex14 = $('#ex14');
      var $ex15 = $('#ex15');
      var $ex16 = $('#ex16');
      var $ex17 = $('#ex17');
      var $ex18 = $('#ex18');

      var ex2Val = 5.5;
      var ex3Val = 10.5;
      var ex4Val = 6.5;
      var ex5Val = 9.5;
      var ex17Val = 4.5;
      var ex18Val = 8.5;
      var ex7Val = 7.5;
      var ex8Val = 5.5;
      var ex9Val = 6.5;
      var ex10Val = 8.5;
      var ex12Val = 7.5;
      var ex13Val = 4.5;
      var ex14Val = 3.5;
      var ex15Val = 6.5;


      $('#ex1').slider({
          value :  ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val,
        formatter: function(value) {
          return 'ABCD: ' + value;
        }
      });


      $('#ex2').slider({
          value : ex2Val,
          tooltip_position:'bottom',
           reversed : true,
        formatter: function(value) {
          return 'A: ' + value;
        }
      });


      $('#ex3').slider({
          value : ex3Val,
          reversed : true,
        formatter: function(value) {
          return 'B: ' + value;
        }
      });


      $('#ex4').slider({
          value : ex4Val,
           reversed : true,
        formatter: function(value) {
          return 'C: ' + value;
        }
      });


      $('#ex5').slider({
          value : ex5Val,
           reversed : true,
        formatter: function(value) {
          return 'D: ' + value;
        }
      });

      $('#ex17').slider({
          value : ex17Val,
           reversed : true,
        formatter: function(value) {
          return 'D: ' + value;
        }
      });

      $('#ex18').slider({
          value : ex18Val,
           reversed : true,
        formatter: function(value) {
          return 'D: ' + value;
        }
      });


      $('#ex6').slider({
          value :  ex7Val + ex8Val + ex9Val + ex10Val,
        formatter: function(value) {
          return 'EFGH: ' + value;
        }
      });


      $('#ex7').slider({
          value : ex7Val,
           reversed : true,
        formatter: function(value) {
          return 'E: ' + value;
        }
      });


      $('#ex8').slider({
          value : ex8Val,
          reversed : true,
        formatter: function(value) {
          return 'F: ' + value;
        }
      });


      $('#ex9').slider({
          value : ex9Val,
           reversed : true,
        formatter: function(value) {
          return 'G: ' + value;
        }
      });


      $('#ex10').slider({
          value : ex10Val,
           reversed : true,
        formatter: function(value) {
          return 'H: ' + value;
        }
      });


      $('#ex11').slider({
          value :  ex12Val + ex13Val + ex14Val + ex15Val,
        formatter: function(value) {
          return 'EFGH: ' + value;
        }
      });


      $('#ex12').slider({
          value : ex12Val,
           reversed : true,
        formatter: function(value) {
          return 'E: ' + value;
        }
      });


      $('#ex13').slider({
          value : ex13Val,
          reversed : true,
        formatter: function(value) {
          return 'F: ' + value;
        }
      });


      $('#ex14').slider({
          value : ex14Val,
           reversed : true,
        formatter: function(value) {
          return 'G: ' + value;
        }
      });


      $('#ex15').slider({
          value : ex15Val,
           reversed : true,
        formatter: function(value) {
          return 'H: ' + value;
        }
      });

      $('#ex16').slider({
          value :ex12Val + ex13Val + ex14Val + ex15Val,
          formatter: function(value) {
          return 'ABCDEFGH: ' + value;
        }
      });

      // If you want to change slider main
      $ex2.on("slide", function(evt) {
        ex2Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });
      $ex3.on("slide", function(evt) {
        ex3Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });
      $ex4.on("slide", function(evt) {
        ex4Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });
      $ex5.on("slide", function(evt) {
        ex5Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });
      $ex17.on("slide", function(evt) {
        ex17Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });
      $ex18.on("slide", function(evt) {
        ex18Val = evt.value;
        $ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
      });

      // If you want to change slider main
      $ex7.on("slide", function(evt) {
        ex7Val = evt.value;
        $ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val));
      });
      $ex8.on("slide", function(evt) {
        ex8Val = evt.value;
        $ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val ));
      });
      $ex9.on("slide", function(evt) {
        ex9Val = evt.value;
        $ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val ));
      });
      $ex10.on("slide", function(evt) {
        ex10Val = evt.value;
        $ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val));
      });

      // If you want to change slider main
      $ex12.on("slide", function(evt) {
        ex12Val = evt.value;
        $ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
      });
      $ex13.on("slide", function(evt) {
        ex13Val = evt.value;
        $ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val ));
      });
      $ex14.on("slide", function(evt) {
        ex14Val = evt.value;
        $ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
      });
      $ex15.on("slide", function(evt) {
        ex15Val = evt.value;
        $ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
      });


      // TOP DOWN APPROACH
      $ex1.on("slide", function(evt) {
        $ex2.slider('setValue', evt.value - ex3Val - ex4Val - ex5Val - ex17Val - ex18Val, false);
        $ex3.slider('setValue', evt.value - ex2Val - ex4Val - ex5Val - ex17Val - ex18Val, false);
        $ex4.slider('setValue', evt.value - ex3Val - ex2Val - ex5Val - ex17Val - ex18Val, false);
        $ex5.slider('setValue', evt.value - ex2Val - ex4Val - ex3Val - ex17Val - ex18Val, false);
        $ex17.slider('setValue', evt.value - ex3Val - ex4Val - ex5Val - ex2Val - ex18Val, false);
        $ex18.slider('setValue', evt.value - ex2Val - ex4Val - ex5Val - ex17Val - ex3Val, false);
      });

      $ex1.on("slideStop", function(evt) {
        ex2Val = $ex2.slider('getValue');
        ex3Val = $ex3.slider('getValue');
        ex4Val = $ex4.slider('getValue');
        ex5Val = $ex5.slider('getValue');
        ex17Val = $ex17.slider('getValue');
        ex18Val = $ex18.slider('getValue');
      });

      // TOP DOWN APPROACH
      $ex6.on("slide", function(evt) {
        $ex7.slider('setValue', evt.value - ex8Val - ex9Val - ex10Val, false);
        $ex8.slider('setValue', evt.value - ex7Val - ex9Val - ex10Val, false);
        $ex9.slider('setValue', evt.value - ex7Val - ex8Val - ex10Val, false);
        $ex10.slider('setValue', evt.value - ex7Val - ex8Val - ex9Val, false);

      });

      $ex6.on("slideStop", function(evt) {
        ex7Val = $ex7.slider('getValue');
        ex8Val = $ex8.slider('getValue');
        ex9Val = $ex9.slider('getValue');
        ex10Val = $ex10.slider('getValue');

      });

      // TOP DOWN APPROACH
      $ex11.on("slide", function(evt) {
        $ex12.slider('setValue', evt.value - ex13Val - ex14Val - ex15Val, false);
        $ex13.slider('setValue', evt.value - ex12Val - ex14Val - ex15Val, false);
        $ex14.slider('setValue', evt.value - ex12Val - ex13Val - ex15Val, false);
        $ex15.slider('setValue', evt.value - ex12Val - ex13Val - ex14Val, false);

      });

      $ex11.on("slideStop", function(evt) {
        ex12Val = $ex12.slider('getValue');
        ex13Val = $ex13.slider('getValue');
        ex14Val = $ex14.slider('getValue');
        ex15Val = $ex15.slider('getValue');

      });

这是Fiddle 上的工作代码

4

0 回答 0