隔离输入更改

时间：2017-07-03 16:50:49

标签： javascript jquery forms

我有多个数量字段，加上＆amp;减去按钮。我在同一页面上有多个，但每次单击加号或减号都会更改页面上的所有输入。

如何将按钮更改隔离到应该更改的输入？有关上下文，请参阅下面的演示：

的jsfiddle https://jsfiddle.net/aL4ckLm9/

HTML 

<fieldset class="ajaxcart__qty">
    <input type='button' value='-' class='qty-minus' field='quantity' />
    <input type='text' id="price-responsive" name="quantity" value="5" class="qty" data-id="{{ item.key }}" />
    <input type='button' value='+' class='qty-plus' field='quantity' />
</fieldset>

<fieldset class="ajaxcart__qty">
    <input type='button' value='-' class='qty-minus' field='quantity' />
    <input type='text' id="price-responsive" name="quantity" value="3" class="qty" data-id="{{ item.key }}" />
    <input type='button' value='+' class='qty-plus' field='quantity' />
</fieldset>

JS 

$('.qty-plus').click(function(e){
  // 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 is not undefined
  if (!isNaN(currentVal)) {
      // Increment
      $('input[name='+fieldName+']').val(currentVal + 1);
  } else {
      // Otherwise put a 0 there
      $('input[name='+fieldName+']').val(0);
  }
});


$(".qty-minus").click(function(e) {
  // 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);
  }
});

5 个答案:

答案 0 :(得分：0)

根据您提供的html，您有两个相同的表单字段，其名称和ID相同。我没有看到任何意义。表单中的每个字段都应具有唯一的名称（并且eventualy为id）。

所以我假设您需要查看每个输入将提供给服务器的内容（作为fieldname）。

然后你可以用名字或者用js改变他们的价值。

您可以使用当前的html进行此操作，但正如我之前所说，使用相同的表单元素名称两次没有多大意义。

答案 1 :(得分：0)

以下是您的解决方案：

$('.qty-plus').click(function(e){
      // Stop acting like a button
      e.preventDefault();
      // Get the field name
      fieldName = $(this).attr('field');
      // Get its current value
      var currentVal = parseInt($(this).parent('.ajaxcart__qty').find('input[name='+fieldName+']').val());
      // If is not undefined
      if (!isNaN(currentVal)) {
          // Increment
          $(this).parent('.ajaxcart__qty:first').find('input[name='+fieldName+']').val(currentVal + 1);
      } else {
          // Otherwise put a 0 there
          $(this).parent('.ajaxcart__qty').find('input[name='+fieldName+']').val(0);
      }
    });


    $(".qty-minus").click(function(e) {
      // Stop acting like a button
      e.preventDefault();
      // Get the field name
      fieldName = $(this).attr('field');
      // Get its current value
      var currentVal = parseInt($(this).parent('.ajaxcart__qty').find('input[name='+fieldName+']').val());
      // If it isn't undefined or its greater than 0
      if (!isNaN(currentVal) && currentVal > 0) {
          // Decrement one
          $(this).parent('.ajaxcart__qty').find('input[name='+fieldName+']').val(currentVal - 1);
      } else {
          // Otherwise put a 0 there
          $(this).parent('.ajaxcart__qty').find('input[name='+fieldName+']').val(0);
      }
    });

答案 2 :(得分：0)

dereference
$('.qty-plus').click(function(e){
	  // Stop acting like a button
	  e.preventDefault();
	  // Get the field name
	  fieldName = $(this).attr('field');
	   //get the text field to be changed
    var inputField = $(this).closest('fieldset').find('input[type="text"]');
	  // Get its current value
    var currentVal = parseInt($(inputField).val());
    
	  // If is not undefined
	  if (!isNaN(currentVal)) {
	      // Increment
	      $(inputField).val(currentVal + 1);
	  } else {
	      // Otherwise put a 0 there
	      $(inputField).val(0);
	  }
	});


	$(".qty-minus").click(function(e) {
	  // Stop acting like a button
	  e.preventDefault();
	  // Get the field name
	  fieldName = $(this).attr('field');
//get the text field to be changed
     var inputField = $(this).closest('fieldset').find('input[type="text"]');
     
     	  // Get its current value
	  var currentVal = parseInt($(inputField).val());
	  // If it isn't undefined or its greater than 0
	  if (!isNaN(currentVal) && currentVal > 0) {
	      // Decrement one
	      $(inputField).val(currentVal - 1);
	  } else {
	      // Otherwise put a 0 there
	      $(inputField).val(0);
	  }
	});

简单的方法：只需获取<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset class="ajaxcart__qty"> <input type='button' value='-' class='qty-minus' field='quantity' /> <input type='text' id="price-responsive" name="quantity" value="1" class="qty" data-id="{{ item.key }}" /> <input type='button' value='+' class='qty-plus' field='quantity' /> </fieldset> <fieldset class="ajaxcart__qty"> <input type='button' value='-' class='qty-minus' field='quantity' /> <input type='text' id="price-responsive" name="quantity" value="5" class="qty" data-id="{{ item.key }}" /> <input type='button' value='+' class='qty-plus' field='quantity' /> </fieldset> <fieldset class="ajaxcart__qty"> <input type='button' value='-' class='qty-minus' field='quantity' /> <input type='text' id="price-responsive" name="quantity" value="3" class="qty" data-id="{{ item.key }}" /> <input type='button' value='+' class='qty-plus' field='quantity' /> </fieldset>中的文本字段并进行操作即可。

答案 3 :(得分：0)

1。您不能在同一页上多个ID 

id="price-responsive"  <<< only one ID per page is allowed!

2。请勿使用无效的属性。

所以不是field="foobar"使用data-field="foobar"或只是使用您的课程：

<input type='button' value='-' class='qty-minus' />

3.您有多个 name="fieldName" 元素，因此您不能指望只有一个元素会被定位。

    $('input[name='+ fieldName +']').val(currentVal + 1); // :( all those selectors

4。不要重复你的逻辑。

保持简单和可维护。使用.on()方法，您既可以引用您的按键/减号按钮，也可以检索常用的Event.deletageTarget（您的".ajaxcart__qty"父级）

＆＃13;
＆＃13; 
$(".ajaxcart__qty").on("click", ".qty-plus, .qty-minus", function(e) {

  e.preventDefault();
  
  var $target = $(e.delegateTarget).find(".qty"),
      isPlus  = $(this).is(".qty-plus"),          // plus clicked?
      val     = parseInt($target.val(), 10) || 0;     // OR default to 0

  if( isPlus ) {
  
    val += 1;
    
  } else if (val > 0) {
  
    val -= 1;
    
  }

  $target.val(val);   // Finally

});
＆＃13; 
<fieldset class="ajaxcart__qty">
  <input class='qty-minus' type='button' value='-'>
  <input class="qty price-responsive" type='text' name="quantity[]" value="1" data-id="{{ item.key }}">
  <input class='qty-plus' type='button' value='+'>
</fieldset>

<fieldset class="ajaxcart__qty">
  <input class='qty-minus' type='button' value='-'>
  <input class="qty price-responsive" type='text' name="quantity[]" value="5" data-id="{{ item.key }}">
  <input class='qty-plus' type='button' value='+'>
</fieldset>

<fieldset class="ajaxcart__qty">
  <input class='qty-minus' type='button' value='-'>
  <input class="qty price-responsive" type='text' name="quantity[]" value="3" data-id="{{ item.key }}">
  <input class='qty-plus' type='button' value='+'>
</fieldset>

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

答案 4 :(得分：-1)

来自您的代码的这一行改变了所有输入，

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

但是你只需要改变最接近的。 

$(this).parent().find('input[name='+fieldName+']').val(currentVal + 1);

完整解决方案https://jsfiddle.net/t8syf9wa/1/

相关问题
最新问题