尝试在标头中包含js脚本没有成功

Question

试图在我的wordpress标头中包含此JS脚本：

$(function() {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Second script - Hover effect on active link

$('.hover-link .nav-1 a').hover(function() {
    $(this).addClass("new");
  },
  function() {
    $(this).removeClass('new');
  });

$('.hvr-underline-from-center').append('<span class="add-icon">       <i class="fas fa-long-arrow-alt-left"></i></span>');
$('.hvr-underline-from-center').hover(
  function() {
    $( this ).find('.add-icon').css('opacity','1');
  }, function() {
    $(this).find('.add-icon').css('opacity','0');
  }
);

没有成功:(

在此页面： https : //studiorayz.com/?page_id=50中，您应该会看到效果。 该脚本添加了一些悬停效果，并在链接的左侧应用了一个小箭头。 谷歌搜索之后，我认为它与语言有关，例如wp正在使用php，而我没有正确使用脚本。

请帮助我，我是一个完整的新手！ 提前致谢！

顺便说一句，您可以在此Codepen上看到整个效果： https ://codepen.io/coolzikri/pen/BEbpzO

Answer 1

在WordPress上，jQuery以兼容模式运行，因此您不能像在其他任何非WordPress项目中那样直接使用美元符号（$）。 如果您检查浏览器的控制台，则会注意到以下错误消息：

TypeError：$不是函数

尝试以下方法：

jQuery(function($) {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Second script - Hover effect on active link
jQuery(function($) {
    $('.hover-link .nav-1 a').hover(function() {
        $(this).addClass("new");
    },
    function() {
        $(this).removeClass('new');
    });

    $('.hvr-underline-from-center').append('<span class="add-icon"><i class="fas fa-long-arrow-alt-left"></i></span>');
    $('.hvr-underline-from-center').hover(
    function() {
        $( this ).find('.add-icon').css('opacity','1');
    }, function() {
        $(this).find('.add-icon').css('opacity','0');
    }
    );
});

---

顺便说一下，您实际上不需要jQuery。 仅使用CSS即可获得几乎相同的效果：

 /* General */ #nr-1:hover + .bg-1, #nr-2:hover + .bg-2 { opacity: 1; } .flexboxcenter { display: flex; direction: rtl; float: right; justify-content: right; align-items: right; } .section-1 { width: 100%; height: 100vh; display: block; position: relative; } .hover-link { height: 100px; width: 100%; z-index: 100000; } .hover-link .nav-1 { z-index: 10000; } .svc-title { direction: rtl; position: relative; font-size: 20px; font-family: 'Heebo', serif; float: right; right: 20px; top: 20px; opacity: 1; color: #a2a3a7; z-index: 100001; padding-bottom: 30px; } .add-icon { vertical-align: middle; font-size: 20px; direction: rtl; color: #000; transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -ms-transition: color 0.25s ease-in-out 0s; } .hover-link .nav-1 a { right: 20px; top: 50px; text-align: right; display: block; font-family: 'Heebo', serif; text-decoration: none; color: black; font-size: 30px; letter-spacing: 0.7px; padding: 0px; transition: all 500ms ease-in-out; } .hover-link .nav-1:hover a { opacity: 0.4; } .hover-link .nav-1 a::after { display: inline-block; opacity: 0; margin: 0 0.25em; content: "\\f30a"; font-family: "Font Awesome 5 Free"; font-size: 0.8em; font-weight: 900; transition: opacity 0.5s ease; } .hover-link .nav-1 a:hover { color: black !important; opacity: 1 !important; transform: translate(-20px) !important; } .hover-link .nav-1 a:hover::after { opacity: 1; } /* Background classes */ .bg-1 { position: absolute; top: 0px; left: 0px; background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat; background-size: cover; height: 200vh; width: 100%; z-index: -1; opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .bg-2 { position: absolute; top: 0px; left: 0px; background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat; background-size: cover; height: 200vh; width: 100%; z-index: -1; opacity: 0.0; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <span class="svc-title"> השירותים שאנו מציעים: </span> <section id="section-1"> <div class="hover-link flexboxcenter"> <div class="nav-1"> <a href="#" id="nr-1" class="hvr-underline-from-center"> הדמיות אדריכליות</a> <div class="bg-1"></div> <br> <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">הדמיות פנים</a> <div class="bg-2"></div> <br> <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">הדמיות חוץ</a> <div class="bg-2"></div> </div> </div> </section>