jqueryイベントをセルのセルにボードに追加する

Question

ボード内のセルにイベントを追加するにはどうすればよいですか？ 私は9×9のグリッドを持っていると私は彼らにイベントを追加したい、例えば、これはHTMLで私のグリッドの一部です：

：

<div class="container"> 
    <div class="dad-board"> 
     <div class="dad-row"> 
     <div class="dad-cell"> 
      <input type="number" data-column="0" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="1" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="2" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="3" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="4" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="5" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="6" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="7" data-line="0"> 
     </div> 
     <div class="dad-cell"> 
      <input type="number" data-column="8" data-line="0"> 
     </div> 
     ... 
     </div> 
    </div> 

は今、jQueryので、私はこのような何かをやってみたかったです

(function() { 
    'use strict' 


    $('#dad-board > dad-cell').focusout(function(){ 

     if($(this).text()>0 && $(this).text()<10){ 

      $(this).addClass('with-value'); 
     }else{ 
      $(this).removeClass('with-value'); 
     } 

    }); 
}()); 

Answer 1

2つのこと：

$('#dad-board > dad-cell')では、クラス名は.dad-cellでなければなりません。

.dad-cellはdivであり、したがって、それらはfocusoutイベントを有さない。私はあなたが$('#dad-board > .dad-cell input')を意味したと思う。

あなたの現在のコードの作業を行うために、あなたはまた、いくつかの調整を行う必要があります：

$('#dad-board > .dad-cell input').focusout(function(){ 
    //as we're talking about input fields, the value is read with val(), not text() 
    //and as you're gonna evaluate it as an integer, lets convert the value to integer 
    var value=parseInt($(this).val());  
    if(!isNaN(value)&&value>0 && value<10){ 
     //you might want to set with-value to the <div>, not the input 
     $(this).parent().addClass('with-value'); 
    }else{ 
     //you might want to set with-value to the <div>, not the input 
     $(this).parent().removeClass('with-value'); 
    } 
}); 

Answer 2

あなた$('#dad-board > dad-cell')セレクタは、それが$('.dad-board >.dad-row> .dad-cell')あるべき誤り、 です。

クラスは.ではなく、#である必要があります。

A > E最初の子のみを選択します。

要素

A Eの子である任意のE要素（すなわち直接の子孫）は$('.dad-board .dad-cell')

の子孫である任意のE要素などのすべての子孫を、選択することができますA要素（つまり、子供、子供の子供など）