prev () дает значение undefined

Question

Я обновляю значение корзины, в котором я хочу увеличить или уменьшить значение элемента корзины, однако я не получаю значение qty, но не определено. Я использую next и prev метод jQuery для получения результата.

javascript:

$(document).ready(function() {
  $('.qtyplus').click(function(e) {
    var cart_id = $(this).attr('data-id');
    var product_id = $(this).attr('data-value');
    var qty = $(this).siblings('input[name="qty"]').val();

    alert(qty);

    e.preventDefault()
    
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
      }
    });
    
    jQuery.ajax({
      url: "{{ url('/increment') }}",
      method: 'get',
      data: {
        qty: qty,
        id: cart_id,
        product_id: product_id
      },
      success: function(result) {
        jQuery('#qty').val(result.qty);
        jQuery('#subtotal').val(result.subtotal);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-th="Quantity">
      <div class="plus-minus" style="width:150px; ">
        <div class="input-group">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyminus" id="subs" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-minus"></span>
            </button>
          </span>
          <input type="text" id="qty" name="qty" class="form-control input-number" value="{{$v_contents->qty}}">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyplus" data-type="plus" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-plus"></span>
            </button>
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 1

Попробуйте это:

var t = 0;
$(document).ready(function() {
function total(){
t=0;
$("input[name='subtotal']").each(function (){
t = t + this.value;
});
$("td.hidden-xs.text-center strong").html(`Total: ${t}`);
}
  $(".qtyplus,.qtyminus").click(function (){
    var input = $(this).parent().parent().find("input[name^='qty']"); $(this).parent().parent().parent().next().find("input[name='subtotal']").val($(this).parent().parent().parent().parent().find("td[data-th^='Price']").text()*input.val());
total();
});
  $('span button').click(function(e) {
    var cart_id = $(this).attr('data-id');
    var product_id = $(this).attr('data-value');
    var qty = $(this).parent().parent().find("input[name^='qty']").val();
    var input = $(this).parent().parent().find("input[name^='qty']");

    $(this).parent().parent().find("input[name^='qty']").val(($(this).hasClass("qtyminus")) ? --qty : ++qty);
    e.preventDefault()
    
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
      }
    });
    
    jQuery.ajax({
      url: "{{ url('/increment') }}",
      method: 'get',
      data: {
        qty: qty,
        id: cart_id,
        product_id: product_id
      },
      success: function(result) {
        input.val(result.qty);
        jQuery('#subtotal').val(result.subtotal);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cart" class="table table-hover table-condensed">
				<thead>
					<tr>
						<th>Product</th>
						<th>Price</th>
						<th>Quantity</th>
						<th class="text-center">Subtotal</th>
						<th></th>
					</tr>
				</thead>
				@foreach($getResult as $v_contents)
				<tbody>
					<tr>
						<td data-th="Product">
							<div class="row">
								<div class="col-sm-4 hidden-xs"><img src="{{asset('images/'.$v_contents->image)}}" alt="..." class="img-responsive"/ height="100" width="100"></div>
								<div class="col-sm-8">
									<h4 class="nomargin">{{$v_contents->name_of_subcategory}}</h4>
									<p>{{$v_contents->description_of_product}}</p>
								</div>
							</div>
						</td>
						<td data-th="Price">12</td>
						<td data-th="Quantity">
							<div class="plus-minus" style="width:150px; ">
								<div class="input-group">
									
							          
							              <button type="button" class="btn btn-default btn-number qtyminus" id="subs" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
							                  <span class="fa fa-minus"></span>
							              </button>
							         
							              <input type="text" id="qty" name="qty" class="form-control qty" value="{{$v_contents->qty}}" >
												          
							              <button type="button" class="btn btn-default btn-number qtyplus" data-type="plus" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
							                  <span class="fa fa-plus"></span>
							              </button>
							          
							      
							    </div>
							</div>								
						</td>
						<?php  $subtotal=$v_contents->price*$v_contents->qty; ?>
						<td data-th="Subtotal" class="text-center">
							<input type="text" id="subtotal" name="subtotal" class="form-control input-number" value="<?php echo $subtotal; ?>" min="1" max="10"></td>
						<td class="actions" data-th="">
							<a class="btn btn-danger btn-sm" href="{{ url('/delete-to-cart'.$v_contents->cart_id)}}"><i class="fa fa-trash-o"></i></a>								
						</td>
					</tr>
				
				</tbody>
				<tfoot>
					@endforeach
					<!-- <tr class="visible-xs">
						<td class="text-center"><strong>Total 1.99</strong></td>
					</tr> -->
					<tr>
						<td><a href="#" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
						<td colspan="2" class="hidden-xs"></td>
						<td class="hidden-xs text-center"><strong>Total </strong></td>
						<td><a href="https://www.paypal.com/webapps/shoppingcart?mfid=1546373779156_cb91e3a2b2dc7&flowlogging_id=cb91e3a2b2dc7#/checkout/shoppingCart" class="btn btn-success btn-block">Checkout <i class="fa fa-angle-right"></i></a></td>
					</tr>
				</tfoot>
			</table>

Answer 2

input[name="qty"] не является прямым братом кнопки .qtyplus. Вам нужно использовать $(this).parent().siblings('input[name="qty"]').val()

$(document).ready(function() {
  $('.qtyplus').click(function(e) {
    var cart_id = $(this).attr('data-id');
    var product_id = $(this).attr('data-value');
    var qty = $(this).parent().siblings('input[name="qty"]').val();

    alert(qty);

    e.preventDefault()
    
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
      }
    });
    
    jQuery.ajax({
      url: "{{ url('/increment') }}",
      method: 'get',
      data: {
        qty: qty,
        id: cart_id,
        product_id: product_id
      },
      success: function(result) {
        jQuery('#qty').val(result.qty);
        jQuery('#subtotal').val(result.subtotal);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-th="Quantity">
      <div class="plus-minus" style="width:150px; ">
        <div class="input-group">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyminus" id="subs" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-minus"></span>
            </button>
          </span>
          <input type="text" id="qty" name="qty" class="form-control input-number" value="{{$v_contents->qty}}">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyplus" data-type="plus" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-plus"></span>
            </button>
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 3

input[name="qty"] не является родственным элементом .qtyplus, которому вы назначили обработчик события. Вам нужно пройти DOM до родителя кнопки, так как это элемент, который является родным:

$(document).ready(function() {
  $('.qtyplus').click(function(e) {
    var cart_id = $(this).attr('data-id');
    var product_id = $(this).attr('data-value');
    var qty = $(this).parent().siblings('input[name="qty"]').val();
    
    console.log(qty);
    
    // the rest of your AJAX code...
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-th="Quantity">
      <div class="plus-minus" style="width:150px; ">
        <div class="input-group">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyminus" id="subs" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-minus"></span>
            </button>
          </span>
          <input type="text" id="qty" name="qty" class="form-control input-number" value="{{$v_contents->qty}}">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-number qtyplus" data-type="plus" data-id="<?php echo $v_contents->cart_id;?>" data-value="<?php echo $v_contents->product_id;?>">
              <span class="fa fa-plus"></span>
            </button>
          </span>
        </div>
      </div>
    </td>
  </tr>
</table>