jquery 셀에 보드에 이벤트 추가

Question

보드의 셀에 이벤트를 추가하려면 어떻게해야합니까? 나는 9 × 9 격자를 가지고 있고 그들에 이벤트를 추가하려면, 예를 들어,이 HTML 내 그리드의 일부입니다

나는 이런 식으로 뭔가하고 싶었던 JQuery와 지금

<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> 

:

을

(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

두 가지 :

$('#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 첫 번째 자식 만 선택하십시오.

의 하위 $('.dad-board .dad-cell')

모든 E 요소 등의 모든 자손을 선택할 수는 A 요소

A E의 (즉, 직계 후손) 자식 인 모든 E 요소, A 요소 (즉 : 어린이 또는 어린이 등)