javascript - 尝试在 header 中包含 js 脚本但没有成功

Question

尝试将此 JS 脚本包含在我的 WordPress header 中:

$(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 在 compatibility mode 中运行因此您不能像在任何其他非 WordPress 项目中那样直接使用美元符号 ($)。如果您检查浏览器的控制台，您会注意到以下错误消息:

TypeError: $ is not a function

试试这个:

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>