jquery show and hide

Question

У меня есть код javascript, который при нажатии ссылки может отображать и скрывать разделы страницы.

function shoh(id) { 

    if (document.getElementById) { // DOM3 = IE5, NS6 
     if (document.getElementById(id).style.display == "none"){ 
      $(id).fadeIn();  
     } else { 
      $(id).hide(); 
     } 
    } else { 
     if (document.layers) { 
      if (document.id.display == "none"){ 
       document.id.display = 'block'; 
      } else { 
       document.id.display = 'none'; 
      } 
     } else { 
      if (document.all.id.style.visibility == "none"){ 
       document.all.id.style.display = 'block'; 
      } else { 
       document.all.id.style.display = 'none'; 
      } 
     } 
    } 
} 

однако сейчас не работает, когда я добавил JQuery FadeIn и скрыть вместо того, чтобы использовать метод document.getElementById. Зачем?

Answer 1

Чтобы выбрать элемент по id с помощью jQuery, вы должны использовать selector syntax, что означает добавление # к идентификатору. Таким образом, изменение

$(id).fadeIn(); 

в

$("#" + id).fadeIn(); 

Answer 2

Попробуйте это:

function shoh(id) { 
    var el = $('#' + id); 
    if (el.is(':visible')) { 
     el.hide(); 
    } else { 
     el.fadeIn(); 
    } 
} 

Answer 3

Благодаря JQuery работает для вас, вы не будете писать код Crossbrowser.

Так просто

var $el = $('#'+id); // <-- this is the main key :-) 

if ($el.css('display') == "none"){ 
     $el.fadeIn();  
} else { 
     $el.hide(); 
} 

Answer 4

Вы могли бы просто объявить его как переменную, а затем оберните его в селекторе JQuery:

var $el = $(document.getElementById(id)); 
// if 
$el.fadein(); 
//else 
$el.hide(); 

jsFiddle