jQuery UI 滑块：根据值更改 HTML

Question

我在根据两个输入的值生成一行 HTML 文本时遇到问题：单选按钮选择和滑块的值。我的示例目前仅部分起作用。当我将滑块位置设置为 2000，然后更改我的单选按钮选择时，会出现相应的文本。但是，再次调整滑块不会影响出现的结果，直到选择另一个单选按钮。我希望在任何输入更改时生成结果。

非常感谢任何建议！ https://jsfiddle.net/mL8j0g5w/4/

<div id="slider"></div>
<input type="text" id="amount">

<input type="radio" id="traffic1" name="traffic" value="Test 1">
<input type="radio" id="traffic2" name="traffic" value="Test 2">
<input type="radio" id="traffic3" name="traffic" value="Test 3">
<input type="radio" id="traffic4" name="traffic" value="Test 4">

<p>Results: <span id="result-1"></span></p>

<script>
$( document ).ready(function() {
  $( "#slider" ).slider({
    value:    1000,
    min:      1000,
    max:      3000,
    step:     1000,
    slide:  function( event, ui ) {
      $( "#amount" ).val( ui.value );
    },
  });
} );
</script>

<script>
$(document).ready(function() {
  $('input').on('change', function() {

  if ($('#amount').val() === '2000' && $('input#traffic1').is(":checked")) {
    $('#result-1').html('Value 1');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic2').is(":checked")) {
    $('#result-1').html('Value 2');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic3').is(":checked")) {
    $('#result-1').html('Value 3');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic4').is(":checked")) {
    $('#result-1').html('Value 4');
  }
  else {
    $('#result-1').html('');
  }

  });
});
</script>

Answer 1

所以我想用 switch/case 来简化您的代码，您唯一缺少的一点是，当您移动滑块并以编程方式更改输入时，您还需要触发变化事件。否则，看起来你很接近！我包含了一个片段，并试图发表评论——但请问它是否没有意义。

$(document).ready(function() {
  // create the jQueryUI slider
  $("#slider").slider({
    value: 1000,
    min: 1000,
    max: 3000,
    step: 1000,
    slide: function(event, ui) {
      // Here's the missing bit:
      $("#amount")
        // show the value...
        .val(ui.value)
        // ... and tell the DOM it's changed.
        .trigger("change");
    },
  });
  // When any input is changed, run my func.
  $('input').on('change', showResult);
});

var showResult = function() {
  // set some variables, rather than creating the same reference many times...
  let amount = $("#amount").val();
  let trafficVal = $("[name='traffic']:checked").val();
  let resultEl = $("#result-1");

  // First, are we at the middle range?
  if (amount === '2000') {
    // We ARE. Now, do something based on the selected radio value.
    switch (trafficVal) {
      case 'Test 1':
        resultEl.text("Value 1")
        break;
      case 'Test 2':
        resultEl.text("Value 1")
        break;
      case 'Test 3':
        resultEl.text("Value 1")
        break;
      case 'Test 4':
        resultEl.text("Value 1")
        break;
        // in the event of NO radio selected...
      case 'default':
        resultEl.text("");
    }
  } else {
    // We are NOT in the mid range. Blank the result field.
    resultEl.text("");
  }
}

#slider {
  width: 400px;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>
<input type="text" id="amount">

<input type="radio" id="traffic1" name="traffic" value="Test 1">
<input type="radio" id="traffic2" name="traffic" value="Test 2">
<input type="radio" id="traffic3" name="traffic" value="Test 3">
<input type="radio" id="traffic4" name="traffic" value="Test 4">

<p>Results: <span id="result-1"></span></p>

Answer 2

最好创建一个函数来应用所有更改 (checkChange())，并在滑块 slide 中调用它。将所有 if 更改为 switch，并将 cases 更改为每个无线电 id。添加了一个 key up 以在您输入 #amonut 输入时触发。

$( document ).ready(function() {
 $( "#slider" ).slider({
  value:  1000,
  min:    1000,
  max:    3000,
  step:  1000,
  slide:  function( event, ui ) {
   $( "#amount" ).val( ui.value );
      checkChange(); //call function at every slide
  },
 });
  $('input').on('change', checkChange); //create function when inputs change
  $('#amount').on('keyup', function(){
    $("#slider").slider("value", $(this).val()); //if you type in the input field, it will change slider value, too
  });
} );

function checkChange() {
  var value = ''; //value of the result
  
 if($('#amount').val() === '2000'){ //check, first, if the value is 2000
  
    var selectedId = $('input[type="radio"][name="traffic"]:checked').attr('id'); //return the selected radio id
    
    switch(selectedId){ //used switch to change 'var value' content
    
      case 'traffic1':
        value = 'Value 1';
        break;

      case 'traffic2':
        value = 'Value 2';
        break;

      case 'traffic3':
        value = 'Value 3';
        break;

      case 'traffic4':
        value = 'Value 4';
        break;

      default:
        value = '';
    } 
    
  }else{
  
   value = '';
    
  }
  
  $('#result-1').html(value);//change Result html
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div id="slider"></div>
<input type="text" id="amount">

<input type="radio" id="traffic1" name="traffic" value="Test 1">
<input type="radio" id="traffic2" name="traffic" value="Test 2">
<input type="radio" id="traffic3" name="traffic" value="Test 3">
<input type="radio" id="traffic4" name="traffic" value="Test 4">

<p>Results: <span id="result-1"></span></p>

jQuery UI 滑块：根据值更改 HTML

jQuery UI Slider: Change HTML Based on Value

jquery

jquery-ui

jquery-ui-slider