Question

我有一个滑块和两个输入。

<div id="slider"></div>
<input type="number" id="firstInput">
<input type="text" id="secondInput">

如果我更改滑块值，第二个输入将被更改，之后我需要实时更新我的上一个输入。

$(function(){
  $( "#slider" ).slider({
    range: "max",
    min: 100,
    max: 1000,
    value: 600,
    slide: function( event, ui ) {
      $( "#firstInput" ).val( ui.value );
      $(ui.value).val($('#firstInput').val());
   }
  });
    $( "#firstInput" ).val( $( "#slider" ).slider( "value" ) );
    $('#firstInput').bind('change paste keyup', function() {
      $( "#slider" ).slider( "value", $('#firstInput').val() );
    });
    $(document).click(function() {
       $('#secondInput').val($('#firstInput').val());
    });
});

我认为改变事件会有所帮助，但不是。

Example in jsfiddle

Answer 1

更新守则

HTML

$(function(){
	$( "#slider" ).slider({
    range: "max",
    min: 100,
    max: 1000,
    value: 600,
    slide: function( event, ui ) {
      $( "#firstInput" ).val( ui.value );
      $(ui.value).val($('#firstInput').val());
      $( "#secondInput" ).val( ui.value );
      $(ui.value).val($('#firstInput').val());
    }
  });
  $( "#firstInput" ).val( $( "#slider" ).slider( "value" ) );
  
  $('#firstInput').bind('change paste keyup', function() {
		$( "#slider" ).slider( "value", $('#firstInput').val() );
	}); $('#secondInput').bind('change paste keyup', function() {
		$( "#slider" ).slider( "value", $('#firstInput').val() );
	});
  $( "#secondInput" ).val( $( "#slider" ).slider( "value" ) );
  $(document).click(function() {
  	$('#secondInput').val($('#firstInput').val());
      	$('#firstInput').val($('#secondInput').val());

	});
});

jquery的

Traceback (most recent call last):
File "C:\spark-2.1.0-bin-hadoop2.7\python\pyspark\shell.py", line 30, in <module>
import pyspark
File "<frozen importlib._bootstrap>", line 961, in _find_and_load
File "<frozen importlib._bootstrap>", line 950, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 646, in _load_unlocked
File "<frozen importlib._bootstrap>", line 616, in _load_backward_compatible
File "C:\spark-2.1.0-bin-hadoop2.7\python\lib\pyspark.zip\pyspark\__init__.py", line 44, in <module>
File "<frozen importlib._bootstrap>", line 961, in _find_and_load
File "<frozen importlib._bootstrap>", line 950, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 646, in _load_unlocked
File "<frozen importlib._bootstrap>", line 616, in _load_backward_compatible
File "C:\spark-2.1.0-bin-hadoop2.7\python\lib\pyspark.zip\pyspark\context.py", line 36, in <module>
File "<frozen importlib._bootstrap>", line 961, in _find_and_load
File "<frozen importlib._bootstrap>", line 950, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 646, in _load_unlocked
File "<frozen importlib._bootstrap>", line 616, in _load_backward_compatible
File "C:\spark-2.1.0-bin-hadoop2.7\python\lib\pyspark.zip\pyspark\java_gateway.py", line 31, in <module>
File "<frozen importlib._bootstrap>", line 961, in _find_and_load
File "<frozen importlib._bootstrap>", line 950, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 646, in _load_unlocked
File "<frozen importlib._bootstrap>", line 616, in _load_backward_compatible
File "C:\spark-2.1.0-bin-hadoop2.7\python\lib\py4j-0.10.4-src.zip\py4j\java_gateway.py", line 18, in <module>
File "C:\Program Files\Python36-32\lib\pydoc.py", line 62, in <module>
import pkgutil
File "C:\Program Files\Python36-32\lib\pkgutil.py", line 22, in <module>
ModuleInfo = namedtuple('ModuleInfo', 'module_finder name ispkg')
File "C:\spark-2.1.0-bin-hadoop2.7\python\lib\pyspark.zip\pyspark\serializers.py", line 393, in namedtuple
TypeError: namedtuple() missing 3 required keyword-only arguments: 'verbose', 'rename', and 'module'

Answer 2

你是说你只需要同时更新两个输入？

$(function() {
    $("#slider").slider({
        range: "max",
        min: 100,
        max: 1000,
        value: 600,
        slide: function(event, ui) {
            $("#firstInput, #secondInput").val(ui.value);
        }
    });
    $("#firstInput, #secondInput").val($("#slider").slider("value"));
});

甚至是这样呢？

$(function() {
    $("#slider").slider({
        range: "max",
        min: 100,
        max: 1000,
        value: 600,
        slide: function(event, ui) {
            $("#firstInput, #secondInput").val(ui.value);
        }
    });
    $("#firstInput, #secondInput").val($("#slider").slider("value"));
    $('#firstInput, #secondInput').bind('change paste keyup', function() {
        $("#slider").slider("value", $(this).val());
        $("#firstInput, #secondInput").val($(this).val());
    });
});

将值发送到一个输入，然后从滑块发送到另一个输入

2 个答案: