I have the following problem:

I would like to change the value of an input field, which is next to an another element, which will be clicked.

HTML:

<div>
   <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a>
   
   <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" 
   type="text" value="{$sArticle.minpurchase}">

   <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a>
</div>

JS:

     $(document).on('click', ".plus", function (event) {
        let currentTarget = event.currentTarget;

        let idOfClickedElement = $(currentTarget).attr('id');

        let currentQuantity = Number($('.quantity'   idOfClickedElement).val());

        $(this).parent().find(".quantity"   idOfClickedElement).val(currentQuantity   1)
    });

There are other input fields which are the same like in the example. Those value changes also, but I want only one.

CodePudding user response：

As each input with /- is inside a div wrapper, you can use

$(this).closest("div").find(".quantityNum--input")

to get the related input.

There's no need for the numeric IDs when using relative DOM traversal.

Combining the and - into a single event gives:

$(document).on('click', ".minus,.plus", function() {
  var delta = $(this).is(".plus") ? 1 : -1;
  $(this).closest("div").find(".quantityNum--input").val((i, val) => {
    console.log(val);
    return (val * 1)   delta;
  });
});

.minus,
.plus {
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="100">
  <a class="plus">[ ]<i class="icon-plus-wide"></i></a>
</div>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="500">
  <a class="plus">[ ]<i class="icon-plus-wide"></i></a>
</div>

CodePudding user response：

I thik you are looking for .next and .prev.

note: I like sharing information usingdata-attributes so I've used that. you can use anything else id/class to differentiate. that's upto you

Just created a demo script for you

$('.number-action-button').on('click', function(){
  const direction = $(this).data('direction');
  if(direction === 'decrement'){
    const $input = $(this).next('input[type="number"]');
    $input.val($input.val() - 1);
  }

  if(direction === 'increment'){
    const $input = $(this).prev('input[type="number"]');
    $input.val(parseInt($input.val())   1);
  }
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="number-action-button"  data-direction="decrement">-</button>
<input type="number" value="0" />
<button class="number-action-button" data-direction="increment" > </button>

CodePudding user response：

simple solution: bundle the 3 elemts into 1 container, so your parent selector can easily catch the input, the way you already do it.

<div>
  <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a>
   
   <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" 
   type="text" value="{$sArticle.minpurchase}">

   <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a>
</div>

if you cant(or dont want) change the html use $(this).next() (or $(this).prev() for the plus button) in order to fint the input.

btw: maybe you'll try that funktion (havn't tested it, but at least it should give you an idea how to)

$(document).on('click', ".plus,.minus", function (event) {
    let input_quantity=false;
    if($(this).hasClass('plus'){
        input_quantity=$(this).prev();
        input_quantity.val(parseInt(input_quantity.val()) 1);
    }else{
        input_quantity=$(this).next();
        input_quantity.val(parseInt(input_quantity.val())-1);
    }
});