Question

기본적으로 저는 startTime에 하나, endTime에 하나씩 네 개의 timepicker가 있습니다. 시작 시간은 startHour와 startMin으로 구분되며 endTime에도 동일하게 적용됩니다.

htmlStr += "<tr><td><input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='startMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>"; 
htmlStr += "<input type='text' id='startHour' name='quantity' value='0' class='qty' /><input type='text' id='startMin' name='quantity' value='0' class='qty' /><br/>"; 
htmlStr += "<input type='button' id='startHourMinus' value='-' class='qtyminus' field='quantity' onClick='minusHour();'/><input type='button' id='startMinMinus' value='-' class='qtyminus' field='quantity' onClick='minusMin();' /></td>"; 

그리고 endTime- 사용자의 경우 :

htmlStr += "<td><input type='button' id='endHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='endMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>"; 
htmlStr += "<input type='text' id='endHour' name='quantity' value='0' class='qty' /><input type='text' id='endMin' name='quantity' value='0' class='qty' /><br/>"; 
htmlStr += "<input type='button' id='endHourMinus' value='-' class='qtyminus' field='quantity' onClick='minusHour();' /><input type='button' id='endMinMinus' value='-' class='qtyminus' field='quantity' onClick='minusMin();' /></td></tr>"; 

플러스와 마이너스가 클릭하면,이 같은 기능을 공유 여기에 내가 내 startTime을 설정하는 방법입니다. 여기 내 자바 스크립트입니다 :

function plusHour() { 
e.preventDefault(); 
// Get the field name 
fieldName = $(this).attr('field'); 
// Get its current value 
var currentVal = parseInt($('input[name=' + fieldName + ']').val()); 
// If is not undefined 
if (!isNaN(currentVal)) { 
    // Increment 
    if (currentVal < 24) { 
     $('input[name=' + fieldName + ']').val(currentVal + 1); 
    } 
} 
// Otherwise put a 0 there 
$('input[name=' + fieldName + ']').val(0); 
} 
function plusMin() { 
    e.preventDefault(); 
    // Get the field name 
    fieldName = $(this).attr('field'); 
    // Get its current value 
    var currentVal = parseInt($('input[name=' + fieldName + ']').val()); 
    // If is not undefined 
    if (!isNaN(currentVal)) { 
     // Increment 
     if (currentVal < 60) { 
      $('input[name=' + fieldName + ']').val(currentVal + 1); 
     } 
    } 
    // Otherwise put a 0 there 
    $('input[name=' + fieldName + ']').val(0); 
} 
function minusHour() { 
    // Stop acting like a button 
    e.preventDefault(); 
    // Get the field name 
    fieldName = $(this).attr('field'); 
    // Get its current value 
    var currentVal = parseInt($('input[name=' + fieldName + ']').val()); 
    // If it isn't undefined or its greater than 0 
    if (!isNaN(currentVal) && currentVal > 0) { 
     // Decrement one 
     $('input[name=' + fieldName + ']').val(currentVal - 1); 
    } else { 
     // Otherwise put a 0 there 
     $('input[name=' + fieldName + ']').val(0); 
    } 
} 
function minusMin() { 
    // Stop acting like a button 
    e.preventDefault(); 
    // Get the field name 
    fieldName = $(this).attr('field'); 
    // Get its current value 
    var currentVal = parseInt($('input[name=' + fieldName + ']').val()); 
    // If it isn't undefined or its greater than 0 
    if (!isNaN(currentVal) && currentVal > 0) { 
     // Decrement one 
     $('input[name=' + fieldName + ']').val(currentVal - 1); 
    } else { 
     // Otherwise put a 0 there 
     $('input[name=' + fieldName + ']').val(0); 
    } 
} 

여기 내 바이올린입니다 : Fiddle 첫 번째와 두 번째는 마지막 두 사람은 endTime- 사용자위한, startTime을위한이.

그러나 시작 또는 종료 시간에 증가 및 감소 버튼을 클릭하면 텍스트 상자에 값이 표시되지 않습니다. 내가 잘못한 부분이 궁금합니다.

미리 감사드립니다. 당신이 e.preventDefault();를 사용하고 있기 때문에

Answer 1

• 당신은, this가 window 객체를 참조 핸들러 내부 그래서 당신은 클릭 핸들러 인라인을 부착하고, 또한 e

  function plusHour() { 
  e= window.event; 
  

• 선언해야합니다. 당신이있어, 각 기능의 끝에서 - 당신은 그런 논리에 문제가있을

  <input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour(this);' /> 
  

  이있는 당신이

  function plusHour(elm) { //elm now refers to clicked element 
  e= window.event; 
  e.preventDefault(); 
  // Get the field name 
  fieldName = $(elm).attr('field'); 
  

• 같은 기능에 액세스 할 수 있습니다 다음과 같이 명시 적 요소의 참조를 전달해야 단순히 0으로 else 조건 안에 있어야

  $('input[name=' + fieldName + ']').val(0); 
  

  를 텍스트 박스 값을 설정.

JSFiddle

Answer 2

1) e.preventDefault 제거(); 객체가 없으므로 오류가있는 스크립트 실행을 막고 있습니다.

2) 모든 텍스트 상자의 이름이 "수량"입니다. 코드에서 입력 이름을 사용하여 요소에 액세스하고 있습니다. 그게 모호하지 않습니까? 어떤 입력 값을 사용할 것입니까? 텍스트 상자에 고유 한 입력 ID로 변경하십시오.

Answer 3

시도해보십시오.

http://jsfiddle.net/puJ6G/849/

난 그냥 실제로 이전 게시물을 편집하고 나는 당신을 도울 것입니다 생각합니다.

이이 내 두 번째 형태 내 첫 번째 양식

<form id='myform1' method='POST' action='#'> 
    <input type='button' value='-' class='qtyminus' field='quantity' /> 
    <input type='text' name='quantity' value='0' class='qty' /> 
    <input type='button' value='+' class='qtyplus' field='quantity' /> 
</form> 

이다는

<form id='myform2' method='POST' action='#'> 
    <input type='button' value='-' class='qtyminus' field='quantity1' /> 
    <input type='text' name='quantity1' value='0' class='qty' /> 
    <input type='button' value='+' class='qtyplus' field='quantity1' /> 
</form> 

나는 사용자가 필드 패스가 될 것입니다 클릭 이제까지 버튼 입력의 이름 그래서 필드를 변경 값을 변경하려는 위치를 입력하십시오.

도움이되기를 바랍니다. 샘플 코드를보고 분석하십시오. 모든 작업에 하나의 함수를 만들기 위해 jQuery를 사용하여

Answer 4

:

$(document).ready(function(){ 

      $("#startHourPlus,#startMinPlus,#endHourPlus,#endMinPlus,#startHourMinus,#startMinMinus,#endHourMinus,#endMinMinus").click(function() 
      { 
       var operation = $(this).val(); // + or - 
       var currentField = $("#" + $(this).attr("field"));    
       var currValue = parseInt(currentField.val()); 
       // Determine whether its PLUS or MINUS operation 
       if(operation == "+") 
       {    
        if (!isNaN(currValue)) 
        { 
         // If its hours, limit it to 24 as max 
         if($(this).attr("field").contains("Hour")) 
         { 
          if(currValue < 24) 
           $(currentField).val(currValue+1); 
          else 
           $(currentField).val(0); 
         } 
         // If its mins, limit it to 60 as max 
         else if($(this).attr("field").contains("Min")) 
         { 
          if(currValue < 60) 
           $(currentField).val(currValue+1); 
          else 
           $(currentField).val(0); 
         } 

        } 
       } 
       else if(operation == "-") 
       { 
        if (!isNaN(currValue) && currValue > 0) 
         $(currentField).val(currValue-1); 
        else 
         $(currentField).val(0); 
       } 

      }); 
     }); 

을 ============================ =========================

그리고 다음과 같이 보일 것이다 HTML은 (몇 이드가 제거 onClicks 추가) :

<table> 
    <tr> 
     <td> 
      <input type='button' id='startHourPlus' value='+' class='qtyplus' field='txtstartHour'/> 
      <input type='button' id='startMinPlus' value='+' class='qtyplus' field='txtstartMin' /> 
      <br/> 
      <input type='text' id='txtstartHour' name='quantity' value='0' class='qty' /> 
      <input type='text' id='txtstartMin' name='quantity' value='0' class='qty' /> 
      <br/> 
      <input type='button' id='startHourMinus' value='-' class='qtyminus' field='txtstartHour' /> 
      <input type='button' id='startMinMinus' value='-' class='qtyminus' field='txtstartMin' /> 
     </td> 

     <td> 
      <input type='button' id='endHourPlus' value='+' class='qtyplus' field='txtendHour' /> 
      <input type='button' id='endMinPlus' value='+' class='qtyplus' field='txtendMin' /> 
      <br/> 
      <input type='text' id='txtendHour' name='quantity' value='0' class='qty' /> 
      <input type='text' id='txtendMin' name='quantity' value='0' class='qty' /> 
      <br/> 
      <input type='button' id='endHourMinus' value='-' class='qtyminus' field='txtendHour' /> 
      <input type='button' id='endMinMinus' value='-' class='qtyminus' field='txtendMin' /> 
     </td> 
    </tr> 
</table> 

을

그것이 효과가 있는지 알려주세요. 데모 here