jQuery 코드가 'Object expected'오류를 반환합니다.

Question

다음 jQuery 코드가 있습니다. 이 같은 두 개의 이벤트 리스너를 작성하고 있습니까? 다음 코드는 an.error

$(document).ready(function() { 
    $('tr').hover(
     function() { 
      $(this).css('background-color', '#FFFF99'); 
      $(this).contents('td').css({ 
       'border': '1px solid red', 
       'border-left': 'none', 
       'border-right': 'none' 
      }); 
      $(this).contents('td:first').css('border-left', '1px solid red'); 
      $(this).contents('td:last').css('border-right', '1px solid red'); 
     }); 

     $('#radioButtonImageSourceContainerId input:radio').click(function() { 
      if ($(this).val() === 'fromFile') { 
       addVisibility("from-file"); 
       removeVisibility("from-url"); 
      } 
      else if ($(this).val() === 'fromUrl') { 
       removeVisibility("from-file"); 
       addVisibility("from-url"); 
      } 
     }) 
    }); 

다른이 개 기능은 처음 요소를 찾을 수 있는지 확인

function addVisibility(elemId) { 
    document.getElementById(elemId).style.display = ""; 
    if (document.getElementById(elemId).style.visibility == "hidden") { 
     document.getElementById(elemId).style.visibility = "visible"; 
    } 
} 

function removeVisibility(elemId) { 
    document.getElementById(elemId).style.display = ""; 
    if (document.getElementById(elemId).style.visibility == "visible") { 
     document.getElementById(elemId).style.visibility = "hidden"; 
    } 
} 

Answer 1

확인되어 발생합니다.

function addVisibility(elemId) { 
    var el = document.getElementById(elemId); 
    if(el) 
     el.style.display = ""; 
     if (el.style.visibility == "hidden") { 
      el.style.visibility = "visible"; 
     } 
    } else { 
     console.log('NO ELEMENT WAS FOUND'); 
    } 
} 

... DOM 선택 물을 반복하는 대신 캐시합니다.

또 다른 문제는이 라인이다 :

$(this).contents('td').css({... 
$(this).contents('td:first')... 
$(this).contents('td:last')... 

contents() 방법뿐만 아니라 텍스트 노드를 반환합니다. 대신 find 또는 children을 사용해야합니다. (jQuery로)

$(this).find('td').css({... 
$(this).children('td').css({... 

---

그것의이 부분을 다시 작성하는 더 좋은 방법은 IMO이 될 것이다 :

$(document).ready(function() { 
    $('tr').hover(function() { 
     $(this).addClass('hilite_row'); 
     var tds = $(this.cells).addClass('hilite_cell'); 
     tds.first().addClass('hilite_left_cell'); 
     tds.last().addClass('hilite_right_cell'); 
    }); 

    $('#radioButtonImageSourceContainerId input:radio').click(function() { 
     var value = $(this).val(), 
      visib = ['hidden','visible'], 
      file = visib[ +(value === 'fromFile') ], 
      url = visib[ +(value === 'fromUrl') ]; 
     if(file === url) return; 
     $("#from-file").css('visibility', file); 
     $("#from-url").css('visibility', url); 
    }) 
}); 

는 그런 다음 CSS의 클래스의 스타일을 정의합니다. IE6가 작동하지 않습니다하지만

---

또는 더 나은이의 :hover 의사 선택기를 사용하여 CSS에서 모든 작업을 수행 할 수 있습니다.

Answer 2

팁 : 테이블 행을 위로 이동하면 contents()으로 약간의 추가 작업이 이루어집니다. contents()은 안전하게 무시할 수있는 텍스트 노드와 주석을 찾습니다. find()도 작동하지만 직접적인 어린이를 통해서가 아니라 DOM을 통해 재귀 적으로 이동합니다. 내가 대신 children()로 변경합니다 :

는

$('tr').hover(function() { 
    $(this).css('background-color', '#FFFF99'); 
    $(this).children('td').css({ 
     'border': '1px solid red', 
     'border-left': 'none', 
     'border-right': 'none' 
    }); 
    $(this).children('td:first').css('border-left', '1px solid red'); 
    $(this).children('td:last').css('border-right', '1px solid red'); 
}, 
function() { 
    // mouseout - you were missing this 
});