Question

我有2个jQuery滑块，我想做这样的事情：

if 1st slider value = 5 and 2nd slider value = 10 then
    print some text
else if (other values) then
    print other text

但它不适用于交换机，也不适用于if-else语句。

我的HTML

<div class="wrapper ui-widget-content">
    <div id="wo"></div>
    <div id="w" class="weight"></div>
    <p class="slider-title">Rider Weight</p>
    <div id="io"></div>
    <div id="inc" class="incline"></div>
    <p class="slider-title">Incline</p>
    <div id="m" class="miles"></div>
</div>

我的JavaScript

var weight = $('#w');
var incline = $('#inc');
var miles = $('#m');
$(function () {
  $(weight).slider({
    animate: "slow",
    max: 250,
    mix: 75,
    step: 25,
    range: 'min',
    change: function( event, ui ) {
      $('#wo').html(ui.value);
    }
  });

  $(incline).slider({
    animate: "slow",
    max: 20,
    mix: 0,
    step: 5,
    range: 'min',
    change: function( event, ui ) {
      $('#io').html(ui.value);
    }
  });

  switch (miles) {
    case $(weight).slider("value", 100) && $(incline).slider("value", 15):
      $(miles).html("100 to 15");
      break;
      case $(weight).slider("value", 75) && $(incline).slider("value", 5):
        $(miles).html("75 to 5");
    default:
      $(miles).html("nothing");
  }
});

Answer 1

首先，switch的工作原理并非如此。您在此处需要if / else if。

其次，$(weight).slider("value", 100)将值100分配给滑块。

您想要这种格式：

weight.slider('value') == 100

第三，您可能希望每次滑块更改时都进行更新。

Answer 2

 $(weight).slider({
   animate: "slow",
   max: 250,
   mix: 75,
   step: 25,
   range: 'min',
   change: function( event, ui ) {
     $('#wo').html(ui.value);
      showDisplay();
   }
 });

 $(incline).slider({
   animate: "slow",
   max: 20,
   mix: 0,
   step: 5,
   range: 'min',
   change: function( event, ui ) {
     $('#io').html(ui.value);
     showDisplay();
   }
 });

 function showDisplay(){
   switch (miles) {
     case $(weight).slider("value", 100) && $(incline).slider("value", 15):
        $(miles).html("100 to 15");
      break;
    case $(weight).slider("value", 75) && $(incline).slider("value", 5):
    $(miles).html("75 to 5");
     default:
     $(miles).html("nothing");
  }
}

试试这个。

jQuery范围滑块开关

2 个答案: