Код jQuery для show() и hide() работает в консоли, но не работает в базе кода; выдается ошибка ".show() и .hide() не являются функциями"

#jquery

Вопрос:

Я добавил новый div, содержащий заголовок, который я хочу сначала скрыть, а затем показать и скрыть при вводе мыши и mouseleave . Этот код отлично работает в консоли, но он не работает, когда я выполняю его в базе кода.

 var optly = function() {
$('.nh-copy-wrap > .title').each(function() {
if ($(this).html().indexOf('Market to a person, not a segment')>-1 amp;amp; $(this).hasClass('optly') == false) {
  $("<div class= "promo-h2">Personalization solutions help you tailor messages to match customers across devices and channels...</div>").insertAfter(this);
  $("div.nh-promo-card-holder:contains('Market to a person, not a segment')").find("div.nh-icon.ibm-arrow-forward-link").addClass("personalization-cta");
  $(".nh-icon.ibm-marketplace-link").addClass("marketplace-logo");
  $(this).addClass('optly');
}
else if ($(this).html().indexOf('Understand and engage in the mobile moment')>-1 amp;amp; $(this).hasClass('optly') == false) {
  $("<div class= "promo-h2">Six billion mobile devices is a big target for marketers. Mobile marketing solutions allow marketers to engage customers...</div>").insertAfter(this);
  $("div.nh-promo-card-holder:contains('Understand and engage in the mobile moment')").find("div.nh-icon.ibm-arrow-forward-link").addClass("mobile-cta");
  $(".nh-icon.ibm-marketplace-link").addClass("marketplace-logo");
  $(this).addClass('optly');
}
else if ($(this).html().indexOf('Create high performing, highly-relevant emails')>-1 amp;amp; $(this).hasClass('optly') == false) {
  $("<div class= "promo-h2">Six billion mobile devices is a big target for marketers. Mobile marketing solutions allow marketers to engage customers through these pervasive devices with...</div>").insertAfter(this);
  $("div.nh-promo-card-holder:contains('Create high performing, highly-relevant emails')").find("div.nh-icon.ibm-arrow-forward-link").addClass("email-cta");
  $(".nh-icon.ibm-marketplace-link").addClass("marketplace-logo");
  $(this).addClass('optly');
}
});
setInterval(optly, 50);
};

var HoverOver = function() {
$(".nh-promo-card-holder").bind("mouseenter", function() {$(".promo-    h2").show();});
$(".nh-promo-card-holder").bind("mouseleave", function() {$(".promo-h2").hide();});
};

$(document).ready(function() {
optly();
setInterval(HoverOver, 200);
});

Я попытался использовать $(document).ready и ждать, пока новый div не станет доступен для манипуляций, прежде чем выполнять приведенный ниже код, но консоль по-прежнему выдает ошибку, которая гласит "...show() is not a function" , и аналогично для hide . Кто-нибудь может помочь?

1. Без полного кода я мог бы предположить, что вы либо не включаете jQuery, либо вызываете show() или hide() перед загрузкой jQuery.

2. Вы уверены, что этот код выполняется после добавления .promo-h2 в DOM?

Ответ №1:

Попробуйте поместить свой код в

$(document).ready(function(){

})

и включите jQuery перед написанием сценария

1. Спасибо Алексу за быстрый ответ! Я пытался это сделать, но я все еще сталкиваюсь с той же ошибкой. Я отредактировал исходное сообщение с полным кодом; надеюсь, этого достаточно для контекста!

Ответ №2:

Похоже, что что-то еще на странице также использует $

Попробуйте обернуть код в:

 (function($){
  /* your code */

})(jQuery);

Также убедитесь, что это загружается после jQuery.js нагрузки

Обратите внимание, что вы также должны очистить интервал, когда найдете элемент

Ответ №3:

Скорее всего, это происходит потому, что jQuery еще не загружен. Ваш код, который использует jQuery, не имеет доступа к jQuery. В результате он не работает. Чтобы решить эту проблему, вы должны сделать так, как сказал Алекс Муравьев:

 $(document).ready(function(){

});

и переместите свой элемент script после элемента jQuery script .