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

所以我想看看用开关/案例简化你的代码，你唯一缺少的是，当你移动滑块并以编程方式更改输入时，你还需要触发更改事件。否则，你似乎很亲密！我已经包含了一个片段，并尝试发表评论 - 但是询问它是否有意义。

$(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来触发。

＆＃13;

$( 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
}

＆＃13;

<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>

＆＃13;

jQuery UI Slider：根据价值改变HTML

2 个答案: