jquery 슬라이더에서 사용되는 Onchange 이벤트

jquery 슬라이더 추가 기능을 사용하여 조작 할 때 값을 Linux 파일에 씁니다.jquery 슬라이더에서 사용되는 Onchange 이벤트

슬라이더는 텍스트 입력 상자를 제어합니다. 상자는 읽기 전용이므로 항상 흐리게 표시됩니다. 이해할 수없는 문제는 onchange 명령이 작동하지 않는 이유입니다. 입력 명령에서 readonly 특성을 제거하면 같은 문제가 발생합니다.

텍스트 입력 상자의 값을 변경하고 Enter 키를 눌러 업데이트 할 수 있기 때문에 제 JavaScript 함수가 작동한다는 것을 알고 있습니다. 하지만 내가해야 할 일은 슬라이더가 변경 될 때마다 번호를 업데이트하는 것이므로 사용자가 입력하는 것이 아니라 슬라이더가이를 제어하기 때문에 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>

출처

2012-09-04 pr-

이벤트 또는 메소드를 명시 적으로 호출 해보십시오. 아래 접근 방식을 따르십시오.

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

});

사용자 중 하나를 선택하십시오.

출처

2012-09-04 16:39:54

완벽하게 작동합니다. 내 유일한 변화는 eval ($ ("# LeftRecordAmount"). attr ("onchange"))을 이동하는 것입니다. 을 슬라이드 부로 이동시킨다. 나는 그 변화가 가치가 있는지, 또는 그것이 사이트를 너무 많이 먹어 치울지를 평가해야 할 것이다. 고마워요! –

@ pr-, 나는 슬라이더 이벤트가 멈추었을 때 함수가 요구하는 것을 할 것이기 때문에 그것을 사용했다. 어쨌든 고마워요 :) –

좋은 지적. 대역폭의 낭비처럼 보입니다. 이 사이트는 내부 사이트이지만 상수 변경은 도스 공격을 복제 할 수 있습니다. 원래 코드를 계속 사용하는 것 같습니다. 다시 한번 감사드립니다. –

홀리 화이트 스페이스 배트맨은 실제로 코드가 늘어나는 구문 분석 횟수가 많지 않기를 바랍니다. 또한 jQuery 라이브러리에 포함 된 Ajax 메서드를 사용하지 않는 이유를 이해하지 못합니다. 왜 jQuery 라이브러리에 이미 IE6을 다시 지원할 때 다시 만들어야 하는가? Java와 JavaScript의 또 다른 두 가지 점은 완전히 다른 점이 있습니다. 읽기 전용 텍스트 상자에 관해서는 왜 대신 비활성화 된 속성을 사용하지 않는 것이 좋을까요? 이것은 또한 더 나은 접근 방법 일 수 있습니다.

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

출처

2012-09-04 16:58:24

jquery 슬라이더에서 사용되는 Onchange 이벤트

답변

관련 문제