.hover 효과의 하위 요소에 클래스 추가

Question

입력 필드에 클래스 이름을 추가하고 싶지만 jquery의 모든 로직을 알지 못합니다.
HTML 코드는

<tr class="jp_contact"><td>text</td><td>text</td><td>text</td><td><input name="in_val" ></td></tr> 
<tr class="jp_contact"><td>text</td><td>text</td><td>text</td><td><input name="in_val" ></td></tr> 
<tr class="jp_contact"><td>text</td><td>text</td><td>text</td><td><input name="in_val" ></td></tr> 

대구가 있습니다 :

$('.jp_contact').each(function(e){ 
     var currentRow = $(this); 
     $(this).hover(
      function(){ 
        $(this).addClass('jp_hover'); 
        $(currentRow + " td:last").removeClass('dis_button'); 
       }, 
      function(){ 
        $(this).removeClass('jp_hover'); 
        $('input[name="in_val"]').addClass('dis_button'); 
       }); 
    }); 

Answer 1

당신의 논리는 결함이있다. 마우스를 올리면 현재 행의 마지막 셀에서 dis_button 클래스가 제거됩니다. 호버 아웃하면, 존재하지 않는 입력 요소에 dis_button 클래스를 추가합니다.

또한 문자열 컨텍스트에서 jQuery 객체를 사용할 수 없습니다. $(currentRow + " td:last")은 $("td:last", currentRow)이어야합니다 ($(currentRow).find("td:last")의 약자).

$('.jp_contact').each(function(e){ 
    var currentRow = $(this); 
    $(this).hover(
     function(){ 
       $(this).addClass('jp_hover'); 
       $("td:last", currentRow).removeClass('dis_button'); 
      }, 
     function(){ 
       $(this).removeClass('jp_hover'); 
       $("td:last", currentRow).addClass('dis_button'); 
      }); 
});