javascript - 尝试在标头中包含 js 脚本没有成功
问题描述
试图在我的 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
解决方案
在 WordPress 上,jQuery 以兼容模式运行,因此您不能像在任何其他非 WordPress 项目中那样直接使用美元符号 ($)。如果您检查浏览器的控制台,您会注意到以下错误消息:
类型错误:$ 不是函数
试试这个:
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>
推荐阅读
- python - 有没有一种简单的方法可以将我的 PyCharm 和 WinPython 的整个安装放在 U 盘上?
- c# - 如何将 CommandParameter 与子 UserControl 的子元素绑定?
- php - 如何在 php 脚本中调用类的函数?
- excel - COUNTIFS 多列按多列作为日期比较
- spring - Jpa Repository findAll 方法有哪些异常
- php - while 循环对 pg_fetch_array($result) 做了什么,以便您获得下一行并结束
- ruby-on-rails - 范围连接表以建立新的关联
- azure-pipelines - Azure Pipeline 中的 Webdriver-Manager 更新
- java - 如何在使用 gradle 的“编译项目”时排除目录?
- node.js - 将 minecraft 与 discord.js 连接起来