JQuery sorunu, metin girişlerini bulmak için en yakın olanını kullanıyor

Question

Şu anda bir foreach döngüsünün her yinelemesinde iki tablo çıktıyorum (C# traş makinesi görünümü, burada çok alakalı olmamasına rağmen). Bu iki tabloyu bir div içinde = jq-roundContainer ile sardım ve her iki tablodaki her girdinin sınıfı jq-hitOrMiss. Aşağıdaki gibi metin girişlerine girilen X sayısını özetlemeye çalışıyorum ama sum değişkeni 0'dır (bunu bilmem gerektiğinde) ve inputs.length da 0'dır.

html Aşağıya HTML ve basit jquery işlevi:

<div class="jq-roundContainer"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr class="active"> 
       <th colspan="2" class="text-center">1</th> 
       <th colspan="2" class="text-center">2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td style="display:none"> 
        @Html.Hidden("EventId", Request.Params["eventId"]); 
        @Html.Hidden("UserId", Request.Params["userId"]); 
        <input type="hidden" name="scoreCards[@i].UserProfile" value="@round.UserProfile" /> 
       </td> 
       <td> 
        <input class="jq-hitOrMiss" onchange="SumHits();" name="scoreCards[@i].Hit1StationOneShotOne" pattern="[xXoO]" type="text" maxlength="1" size="1" value="@ScoreHitMisConverter.IsHitToTableRowValue(round.Hit1StationOneShotOne)" /> 
       </td>         

       @{i++;} 
      </tr> 
     </tbody> 
    </table> 

    <table class="table table-bordered"> 
     <thead> 
      <tr class="active"> 
       <th colspan="2" class="text-center">14</th> 
       <th class="text-center">TOTAL</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <input class="jq-hitOrMiss" onchange="SumHits();" name="scoreCards[@i].Hit27StationThreeShotSeven" pattern="[xXoO]" type="text" maxlength="1" size="1" value="@ScoreHitMisConverter.IsHitToTableRowValue(round.Hit27StationThreeShotSeven)" /> 
       </td> 
       <td class="text-center total jq-total">@round.Score</td> 
       @{i++;} 
      </tr> 
     </tbody> 
    </table> 
</div> 

ve jquery işlevi: Bu window işaret edecek

function SumHits() { 

     var sum = 0; 
     var inputs = $(this).closest('.jq-roundContainer').find('.jq-hitOrMiss'); 
     $.each(inputs, function (index, value) { 
      var value = $(value).val(); 
      if (value == 'X' || value == 'x') { 
       sum++; 
      } 
     }); 
     var totalInput = $(this).closest('.jq-roundContainer').find('.jq-total'); 
     totalInput.text(sum); 
    } 

Answer 1

Normal fonksiyonu içinde. Yani bir satır içi işleyici kullandığınızda, this'u açıkça iletmeniz, onu işlevin içine almanız ve kullanmanız gerekir.

function SumHits(_this) { 
    var inputs = $(_this).closest('.jq-roun..... 

Ve html

,

<input class="jq-hitOrMiss" onchange="SumHits(this);"..... 

Answer 2

sorun olayı tetikleyen window değil elemanı ifade eder this elemana ortaya çıkar. Sonuç olarak,

sonucunu elde edersiniz, jQuery bağlama etkinliğini kullanarak ve benzer şekilde satır içi tıklama işleyicisinden kurtulun.

Bu benim için çalışıyor

$('.jq-hitOrMiss').on('change', SumHits) 

Answer 3

,

$('div.jq-roundContainer input.jq-hitOrMiss').change(function() { 
    var $parent = $(this).parents('.jq-roundContainer'); 
    var sum = 0; 
    var inputs = $parent.find('.jq-hitOrMiss'); 
    inputs.each(function() { 
     var value = $(this).val(); 
     if (value == 'X' || value == 'x') { 
      sum++; 
     } 
    }); 
    var totalInput = $parent.find('.jq-total'); 
    totalInput.text(sum); 
}); 

sürdürmek zordur veya console.log için fonksiyon

$('div.jq-roundContainer input.jq-hitOrMiss').change(SumHits); 

function SumHits(){ 
    var $parent = $(this).parents('.jq-roundContainer'); 
    var sum = 0; 
    var inputs = $parent.find('.jq-hitOrMiss'); 
    inputs.each(function() { 
     var value = $(this).val(); 
     if (value == 'X' || value == 'x') { 
      sum++; 
     } 
    }); 
    var totalInput = $parent.find('.jq-total'); 
    totalInput.text(sum); 
}