Question

所以我的网页上有一些jQuery UI sliders代码

var sliders = $("#sliders .slider");
var availableTotal = 100;


sliders.each(function () {
    var init_value = parseInt($(this).text());
    $(this).siblings('.value').text(init_value);
    $(this).empty().slider({      
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 5,
        animate: 0,
        slide: function (event, ui) {
             // ... 
        } 

    });
});

与他们联系。我正在尝试编写一个测试脚本，使它们自动向右或向左滑动，如

for ( var k = 0; ; ++k )
{
    setTimeout(50,function(){ 
        $(sliders[k % sliders.length]).slide(...); 
    });
}

但我不确定(...)中的内容。 event和ui到底是什么以及如何为自动化测试传递随机生成的有效值？

Answer 1

如果要以编程方式测试滑块，则需要设置循环并调整其值。我将以下小提琴设置为示例：https://jsfiddle.net/Twisty/azybrcn6/

~~我的计时器功能有些奇怪...仍在继续工作，但这个想法很合理。~~

<强> JQuery的

var timer;
var inc = "pos";

function slideInc(obj, n) {
  // Increment SLider Object by n
  var v = obj.slider("option", "value");
  obj.slider("option", "value", v + n);
  console.log("Slider was ", v, " set to ", obj.slider("option", "value"));
}

function slideDec(obj, n) {
  // Decrement Slider Object by n
  var v = obj.slider("option", "value");
  obj.slider("option", "value", v - n);
  console.log("Slider was ", v, " set to ", obj.slider("option", "value"));
}

$(function() {
  var k = 0;
  $("#slider").slider({
    min: 0,
    max: 100,
    range: "max",
    step: 5,
    animate: 0,
    value: 0,
    slide: function(e, ui) {
      $("#value").html(ui.value);
    }
  });
  $("#test, #end").button();
  $("#test").click(function() {
    console.log("Starting.");
    var $t = $("#slider");
    var min = $t.slider("option", "min");
    var max = $t.slider("option", "max");
    var st = $t.slider("option", "step");

    timer = setInterval(function() {
      console.log("Inc is ", inc);
      if (inc == "pos") {
        slideInc($t, st);
        if ($t.slider("option", "value") == max) {
          inc = "neg";
        }
      } else {
        slideDec($t, st);
        if ($t.slider("option", "value") == min) {
          inc = "pos";
        }
      }
      $("#value").html($t.slider("option", "value"));
      console.log("Next.");
    }, 1000);
  });
  $("#end").click(function() {
    console.log("Ending, value: " + $("#slider").slider("option", "value"));
    clearInterval(timer);
  });
});

当我们启动计时器时，我会将k增加step直到它到达max，然后切换到递减。每次定时器执行该功能时，它将检查我们是否增加或减少k，调整滑块，然后重新开始。

~~我还不能称之为一个有效的例子。它会一次射击，然后不会重复。一旦我按照你所描述的那样工作，它会继续工作并更新。~~

如何编写使jQuery UI滑块自动滑动的脚本？

1 个答案: