JQuery的目標一類嵌套標記

Question

嗨，大家好，這是我的標記爲我的形式

我努力的目標使用他們classes..this形式的一部分是動態創建的textarea元素。

<div class="panel-body"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <div class="form-group"> 
           {{ Form::label('product_name', 'Product Name') }}<span id="error-product_name"></span> 
           <div class="input-group"> 
            {{ Form::select('product_name[]',$products, null, ['class' => 'form-control required products-list product_name', 'placeholder'=>'--Select Product--', 
            'data-msg-required'=>"Please select a product",'id'=>'product_name']) }} 
            <i class="input-group-btn"> 
             {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#productModal']) }} 
            </i> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-4"> 
          <div class="form-group"> 
           {{ Form::label('product_category', 'Category') }}<span id="error-product_category"></span> 
           {{ Form::select('product_category[]',[], null, ['class' => 'form-control required categories product_category', 'placeholder'=>'--Select Category--', 
           'data-msg-required'=>"Please select a category",'id'=>'categories']) }} 
          </div> 
         </div> 
         <div class="col-md-2"> 
          <div class="form-group"> 
           {{ Form::label('qty', 'Quantity') }}<span id="error-qty"></span> 
           <div class="input-group"> 
            {{ Form::text('qty[]', null, ['class' => 'form-control required qty','data-msg-required'=>"Please enter a quantity"]) }} 
            <i class="input-group-btn"> 
             {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#aqlModal']) }} 
            </i> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-2"> 
          <div class="form-group"> 
           {{ Form::label('unit', 'Unit') }}<span id="error-unit"></span> 
           {{ Form::select('unit[]',[], null, ['class' => 'form-control required unit', 'placeholder'=>'--Select Unit--', 
            'data-msg-required'=>"Please select a unit"]) }} 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           {{ Form::label('po_no', 'PO Number') }}<span id="error-po_no"></span> 
           {{ Form::text('po_no[]', null, ['class' => 'form-control required po_no','data-msg-required'=>"Please enter the PO Number"]) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('cmf', 'Color/Material/Finish') }}<span id="error-cmf"></span> 
           {{ Form::textarea('cmf[]', null, ['class' => 'form-control cmf','rows'=>'2']) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('shipping_mark', 'Shipping Mark') }}<span id="error-shipping_mark"></span> 
           {{ Form::textarea('shipping_mark[]', null, ['class' => 'form-control shipping_mark','rows'=>'2']) }} 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           {{ Form::label('brand', 'Brand') }}<span id="error-brand"></span> 
           {{ Form::text('brand[]', null, ['class' => 'form-control required brand','data-msg-required'=>"Please enter the product brand"]) }} 
          </div> 

          <div class="form-group"> 
           {{ Form::label('tech_specs', 'Technical Specifications/Rating') }}<span id="error-tech_specs"></span> 
           {{ Form::textarea('tech_specs[]', null, ['class' => 'form-control tech_specs','rows'=>'2']) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('additional_info', 'Additional Information') }}<span id="error-additional_info"></span> 
           {{ Form::textarea('additional_info[]', null, ['class' => 'form-control additional_info','rows'=>'2']) }} 
          </div> 
         </div> 
        </div> 
       </div> 

我試圖填充從我的AJAX調用JSON響應所有這些領域..每當我嘗試目標直接使用類的元素。與同級別的所有附加元素填充了相同的值。我只想從我的ajax調用中填充最接近的元素。

這裏是我的javascript代碼

$('body').on('change','.product_name', function(){ 
    var product_id = $(this).find('option:selected').val(); 
    $.ajax({ 
     url : selectproduct, 
     type: 'POST', 
     data:{ 
      _token : token, 
      product_id : product_id 
     }, 
     beforeSend: function(){ 
      console.log('loading'); 
     }, 
     success: function(response){ 
      console.log(response); 
      $(this).next('.row').find('.shipping_mark').val(response.product.shipping_mark); 
     } 
    }); 
    }); 

Answer 1

this阿賈克斯成功裏面指的是不同的對象。您需要將原始參考保存在變量中。

$('body').on('change','.product_name', function(){ 
    var product_id = $(this).find('option:selected').val(); 
    var self = this; // save reference in a variable 
    $.ajax({ 
     url : selectproduct, 
     type: 'POST', 
     data:{ 
      _token : token, 
      product_id : product_id 
     }, 
     beforeSend: function(){ 
      console.log('loading'); 
     }, 
     success: function(response){ 
      console.log(response);//Use the saved reference in next line 
      $(self).next('.row').find('.shipping_mark').val(response.product.shipping_mark); 
     } 
    }); 
    }); 

Refer here有關此問題的更多選項。