Question

我正在使用一个jquery滑块插件，当它被操作时，它会将值写入linux文件。

Slider控制文本输入框。盒子是只读的，所以它总是模糊的。我无法理解的问题是为什么onchange命令不起作用。如果我删除输入命令上的readonly属性，我遇到了同样的问题。

我知道我的javascript函数有效，因为我可以更改文本输入框的值并按Enter键，它将更新。但我需要它做的是在滑块改变时更新数字，所以我不能使用keyup或keydown命令，因为滑块控制它，而不是用户的输入。

<script type="text/javascript">

$(document).ready(function() {

    $( "#LeftRecordSlider" ).slider({

        range: "min",

        orientation: "vertical",

        value: 50,

        min: 0,

        max: 100,

        slide: function( event, ui ) {

            $( "#LeftRecordAmount" ).val( ui.value );

        }

    });

    $( "#LeftRecordAmount" ).val( $( "#LeftRecordSlider" ).slider( "value" ) );

});

</script>

<script type="text/javascript">

    function ChangeVolume(volumetype,volumelevel)
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {//IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {//IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("VolumeOutput").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ChangeVolume.php?volumetype="+volumetype+"&volumelevel="+volumelevel,true);
            xmlhttp.send();
        };



</script>


<label for="LeftRecordAmount">Left Record Volume:</label>

<input type="text" onchange="ChangeVolume('LeftRecord',this.value)" id="LeftRecordAmount" style="border:0; width:3em; color:#0080ff; font-weight:bold;" readonly/>

<div id="VolumeOutput"></div>

Answer 1

尝试显式调用事件或方法。遵循以下方法

$( "#LeftRecordSlider" ).slider({
    range: "min",
    orientation: "vertical",
    value: 50,
    min: 0,
    max: 100,
    slide: function(event, ui) {
        $("#LeftRecordAmount").val( ui.value );
    },
    stop : function(event, ui){
        eval($("#LeftRecordAmount").attr("onchange")); // first approach
        ChangeVolume('LeftRecord',ui.value) // second approach
    }

});

用户中的任何一个。

Answer 2

神圣的空白蝙蝠侠希望你的代码实际上并不喜欢你的解析时间增加很多。另外我不明白你为什么不使用jQuery库中包含的Ajax方法，为什么在已经支持IE6时重新发明轮子。 Java和JavaScript是另外两件完全不同的东西，请不要同样引用它们。至于readonly文本框，为什么不使用disabled属性而不是它更好。这也可能是一种更好的方法。

  var control = document.getElementById("LeftRecordAmount");
  control.addEventListener("change", function(){
      //do whatever here
  }
  //vanilla javascript runs faster than jQuery you can even test with console.time() profiler and        jsperf.com
  //inline handlers are also bad here's why

http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html

与jquery滑块一起使用的Onchange事件

2 个答案: