change not working jQuery

-2

변경 값을 div에 표시하려고하지만 작동하지 않습니다. 플러스와 변화를 신호하는 클릭 이벤트를 처리해야 빼기위한change not working jQuery

button_up=document.getElementById('up'); 
 
button_down=document.getElementById('down'); 
 

 
button_up.onclick=function() {setQuantity('up');} 
 
button_down.onclick=function() {setQuantity('down');} 
 

 
quantity = document.getElementById('quantity'); 
 

 
function setQuantity(upordown) { 
 

 
    if (quantity.value > 1) { 
 
     if (upordown == 'up'){++quantity.value;} 
 
     else if (upordown == 'down'){--quantity.value;}} 
 
    else if (quantity.value == 1) { 
 
     if (upordown == 'up'){++quantity.value;}} 
 
    else 
 
     {quantity.value=1;} 
 

 
} 
 

 
$('.order-option input[type=\'text\']').change(function(){ 
 
      $('.show').text($('#quantity').val()) 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="order-option">Quantity: <span id="quantity-field"> 
 
     <button id="down">-</button> 
 
     <input type="text" id="quantity" value="1"> 
 
     <button id="up">+</button> 
 
    </span> 
 
</div> 
 
<div class="show"></div>

출처

2016-08-01 MAHAR

은 변경 이벤트를 트리거하는 작업을 할 때 잘 동작합니다. * 힌트 힌트 * –

jquery와 js를 많이 혼합하는 것 같습니다. 일종의 일관성을 유지하려고하면 document.getElementById가 작동하지만 jquery를 사용하는 이유는 단지 $ ("quantity")가 아니기 때문입니다. – JonH

변경 이벤트가 늘 호출 할 필요가 없습니다, 그것은 경우에만 트리거됩니다 마우스 또는 키보드로 값을 강제로 변경하십시오 ... 따라서 기능 당 수량을 설정하는 동안 변경 이벤트를 트리거해야합니다.

var button_up=document.getElementById('up'); 
var button_down=document.getElementById('down'); 

button_up.onclick=function() {setQuantity('up');} 
button_down.onclick=function() {setQuantity('down');} 

var quantity = document.getElementById('quantity'); 
var $targetInput = $('.order-option input[type=\'text\']'); 
function setQuantity(upordown) { 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else 
     {quantity.value=1;} 
    $targetInput.trigger('change'); 
} 

$targetInput.change(function(){ 
    $('.show').text($('#quantity').val()) ; 
    });

출처

2016-08-01 19:53:39 CNKR

귀하의 버튼 : 다음은 예입니다. 예를 들어, 입력 필드로 직접 가서 숫자를 입력하고 포커스를 잃으면 div가 업데이트를 가져 오는 것을 볼 수 있습니다. 당신이

$(".movingOnUpOrDown").click(function(){ 
    $('.show').text($('#quantity').val()); 
});

할 수 있습니다 :

<button class="movingOnUpOrDown" id="down">-</button> 
<button class="movingOnUpOrDown" id="up">-</button>

그런 다음 클래스 수준의 이벤트를 처리 :

먼저 두 버튼에, 같은 클래스 이름을 클래스를 할당 : 다음과 같이 뭔가를 할 수 이미 set이 있으므로 getValue에 대한 메소드 호출과 같은 리팩터링 버튼 클릭 이벤트에서 setValue() 함수를 호출 한 후 getValue()에 바로 올 수 있으며이 함수는 단순히 수량을 반환합니다.

이것은 모두 테스트되지는 않았지만 다른 가능성을 고려해야합니다. 당신이 JQuery와 함께 일을하려고 할 때 당신의 setQuantity 기능

function setQuantity(upordown) {  
    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else{ 
     quantity.value=1; 
    } 
    $('.show').html(quantity.value); 
}

에서

출처

2016-08-01 19:46:00 JonH

작업 예제를 추가 할 수 있습니까? – MAHAR

예가 추가되었습니다. 두 단추를 모두 클래스 이름으로 설정하고 클릭 이벤트를 처리하십시오. – JonH

작은 변화 당신이

$('.order-option input[type=\'text\']').change(function(){ 
      $('.show').text($('#quantity').val()) 
     });

출처

2016-08-01 19:50:20 jonju

이것은 또 다른 가능성입니다.하지만 set은 값을 설정해야한다고 생각합니다.이 값을 얻으려면 다른 메서드를 호출해야합니다. – JonH

이것은 내 질문이 아닙니다. – MAHAR

@MAHAR 귀하의 질문은 무엇입니까? 그때? div – jonju

게시 한 순서대로 코드를 작성하면 작동하지 않습니다.

일반적으로 마크는 자바 스크립트가 작업하기 전에 먼저 브라우저에 다운로드해야하기 때문에 먼저 표시됩니다.

그래서

HTML 자바 스크립트 라이브러리 jQuery와 로 참조하고 사용자 지정 자바 스크립트 될 것입니다.

코드를 실행하여 콘솔에서 오류가 발생하여 null에서 onclick을 정의 할 수 없습니다. javascript가 실행될 때 HTML이 다운로드 될 때까지 기다리지 않았으므로 버튼이 null입니다.

jQuery에서 코드를 실행하기 전에 document.ready()를 사용하여 HTML (DOM)이 다운로드 될 때까지 기다릴 수 있습니다.

코드 재구성을 시도하고 document.ready에서 코드를 래핑하고 최신 브라우저의 개발자 도구 (콘솔)를 계속 주시하십시오.

도움이되지 않는다면 다시 여기로 돌아 오십시오.

난 그냥 코드를 편집하고 난 수량 입력 필드에서 텍스트를 얻을 수는 사소한 변화 쇼 사업부에 표시합니다.

<html> 
<body> 
<div class="order-option">Quantity: <span id="quantity-field"> 
     <button id="down">-</button> 
     <input type="text" id="quantity" value="1"> 
     <button id="up">+</button> 
    </span> 
</div> 
<div class="show"></div> 
</body> 

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

$(function(){ 
button_up=document.getElementById('up'); 
button_down=document.getElementById('down'); 

button_up.onclick=function() {setQuantity('up');} 
button_down.onclick=function() {setQuantity('down');} 

quantity = document.getElementById('quantity'); 

function setQuantity(upordown) { 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value; $('.show').text($('#quantity').val()) ;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else 
     {quantity.value=1;} 

} 

$('.order-option input[type=\'text\']').change(function(){ 
      $('.show').text($('#quantity').val()) 
     }); 
     }); 
</script>

수량 입력이 물리적으로 변경되지 않으므로 onchange 이벤트가 발생하지 않습니다. 테스트하고 싶다면 수량 입력 필드에 커서를 놓고 그 안에 무언가를 입력 한 다음 화면의 다른 곳을 클릭하면 수량 상자에 입력 한 내용이 show div에 표시됩니다. 이는 입력 필드를 변경하고 포커스를 이동했기 때문입니다.

그래서 (위 코드에서 예제를 추가 한) 수량 입력 필드를 업데이트하고 동시에 작동하지 않는 onchange 이벤트를 제거 할 때 show div를 업데이트하는 것이 좋습니다.

출처

2016-08-01 19:59:15

change not working jQuery

답변

관련 문제