jQueryコードが 'Object expected'エラーを返します

Question

私は以下のjQueryコードを持っています。このような2つのイベントリスナーを書いていますか？次のコードは、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"); 
      } 
     }) 
    }); 

他の2つの機能は、あなたが最初の要素を発見したことを確認する

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のクラスのスタイルを定義します。

---

あるいはさらに良い、:hover擬似セレクタを使用してIE6が動作しませんが、CSSでそれをすべて行います。

Answer 2

ちょうどあなたのためのヒント：テーブル行のホバーは、contents()と少しの余分な作業をしています。 contents()は、安全に無視できるテキストノードとコメントを探します。 find()も同様に動作しますが、直接の子どもの代わりにDOMを再帰的に移動します。

$('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 
});