JSFIddle не работает с Jquery - PullRequest
Новая
       7

JSFIddle не работает с Jquery

1 голос
/ 17 июня 2011

Работая над ответом на этот вопрос я создал этот jsfiddle . По какой-то причине это не работает, и когда я использовал консоль ошибок Firebug, он возвращал, что «.show» не является функцией. Это наводит меня на мысль, что jsfiddle неправильно загружает jQuery. Есть ли известные проблемы между JSFiddle и jQuery? Мой код просто неверен (кстати, когда я изменяю .show("slow") на .style.display = "inherit", он работает нормально, поэтому я думаю, что это должно быть проблемой с jQuery ...)

Работающий JSFiddle был бы очень признателен.

Ответы [ 3 ]

6 голосов
/ 17 июня 2011

Пара проблем:

  1. Вы забыли }.
  2. Вы вызываете методы jQuery для элементов, которые не обернуты в объект jQuery.Вам нужно будет сделать: 

$(itemName.getElementsByTagName("span")[0]).show("slow");

(обратите внимание на упаковку).Методы jQuery волшебным образом не расширяют элементы по умолчанию, объект должен быть перенесен первым.

Обратите внимание, что эта версия работает .

EDIT :

В качестве альтернативы, вы можете использовать второй параметр конструкции (области действия) jQuery и сократить этот код: 

function showy(itemName) {
    $('span:first',itemName).show("slow");
}
function closy(itemName) {
    $('span:first',itemName).hide("slow");
}

EDITv2

Воспитанный Хуанхороший момент, вы должны также отделить JavaScript с разметкой.Под этим я подразумеваю избегать использования атрибутов on * элементов и хранить привязки во внешнем файле .js или тегах <script>.например, 

<head>
  ...
  <script src="http://path.to/jquery.js">
  <script>
    $(function(){ // execute once the document is ready (onload="below_code()")

      // bind to the buttons' hover events
      // find them by the "button" and "white" class names
      $('.button.white').hover(function(){ // hover event (onmouseover="below_code()")

        // find the first span within the link that triggered the event
        $('span:first',this).show('slow');

      },function(){ // mouse out event (onmouseout="below_code()")

        // likewise, find first span
        $('span:first',this).hide('slow');

      });
    });
  </script>
  ...
</head>

<body>
  ...
  <a href="#" class="button white" id="button1">
    <span id="spanToShow">SHOW: this text&nbsp;</span>
    on hover
  </a>
  ...
</body>
2 голосов
/ 17 июня 2011

Я изменил это так: 

function showy(itemName) {
    $(itemName).find("span").show("slow");
}
function closy(itemName) {
     $(itemName).find("span").hide("slow");
}

См .: http://jsfiddle.net/ttweX/

1 голос
/ 17 июня 2011

Я действительно не фанат навязчивого javascript: p

Вы должны привыкнуть никогда не использовать встроенные обработчики событий, а вместо этого использовать привязку событий jQuery.

Лучшее решение:

http://jsfiddle.net/ttweX/2/

Кроме того, тот, с кем связан Том, совершает какое-то странное бесконечное мерцающее противостояние. 

$(function(){
    $('a.button').hover(
       function(){
         $(this).find('span').show('slow');
       },
       function(){
         $(this).find('span').hide('slow');
       }
    )
});
...