[英]How to apply javascript to more than one class?
I am using bootstrap tabs and inside I have a div with a class called img-parallax
and an h1 element. 我正在使用bootstrap选项卡,在里面我有一个名为
img-parallax
和h1元素的div。 After that I have a div with a class called content. 之后,我有一个名为content的类div。
What I did was create a parallax effect on the img-parallax
class and the h1, and the content after it move over it using a function called ScrollBanner. 我所做的是在
img-parallax
类和h1上创建一个视差效果,并使用一个名为ScrollBanner的函数在它上面移动后的内容。
The problem is that this effect only works on the first tab, if I switch to the second tab it doesn't work. 问题是这个效果只适用于第一个选项卡,如果我切换到第二个选项卡则不起作用。 Even selecting the classes with the javascript code.
甚至用javascript代码选择类。
The only way that I made it works was duplicating the function that do the parallax effect and using another class like img-parallax2.
我使它工作的唯一方法是复制执行视差效果的函数并使用另一个类,如
img-parallax2.
I already tried: 我已经尝试过:
Use a comma to select multiple classes in the javascript function like this: 使用逗号在javascript函数中选择多个类,如下所示:
var headerText = document.querySelector('.img-paralax, .imgparalax2');
Changing the document.querySelector
to document.querySelectorAll
and it didn't worked too. 将
document.querySelector
更改为document.querySelectorAll
,但它也没有用。
And it didn't worked. 它没有奏效。
I don't want to use the duplicated function, I want to use one for every element that uses the class .img-paralax.
我不想使用重复的函数,我想为每个使用类
.img-paralax.
元素使用一个.img-paralax.
Here is the code with everything working with the javascript function duplicated: 这里的代码包含所有与javascript函数重复的内容:
Example html code: 示例html代码:
<div class="img-paralax">
<h1>Sample Title</h1>
</div>
<div class="content">
<p>Content Here</p>
</div>
The css: css:
.img-paralax {
background-image: url('https://placehold.it/1920x1080.png');
background-size: cover;
background-position: center;
width: 100%;
position: fixed;
height: 500px;
}
.img-paralax h1 {
text-align: center;
color: #fff;
text-shadow: 2px 2px 1px #000;
font-family: 'Arial';
letter-spacing: 20px;
font-size: 50px;
font-weight: 900;
padding: 0;
line-height: 452px;
margin: 48px 0px 0px;
text-transform: uppercase;
}
.content {
position: relative;
top: 500px;
padding: 10px 20px;
background: #fff;
height: 1500px;
}
And the javascript: 和javascript:
function scrollBanner() {
var scrollPos;
var headerText = document.querySelector('.img-paralax');
scrollPos = window.scrollY;
if (scrollPos <= 400) {
headerText.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
}
}
window.addEventListener('scroll', scrollBanner);
function scrollBannerText() {
var scrollPosText;
var headerTextH1 = document.querySelector('.img-paralax h1');
scrollPosText = window.scrollY;
if (scrollPosText <= 400) {
headerTextH1.style.transform = "translateY(" + (-scrollPosText/3) +"px" + ")";
headerTextH1.style.opacity = 1 - (scrollPosText/400);
}
}
window.addEventListener('scroll', scrollBannerText);
You do need to use querySelectorAll
but should keep in mind that it returns HTMLCollection
not a single node. 您确实需要使用
querySelectorAll
但应记住它返回HTMLCollection
而不是单个节点。 For example you can use Array.prototype.forEach
to iterate over all nodes matching selector. 例如,您可以使用
Array.prototype.forEach
迭代匹配选择器的所有节点。 Demo . 演示 。
function scrollBanner() {
var scrollPos = window.scrollY;
if (scrollPos <= 400) {
[].forEach.call(
document.querySelectorAll('.img-paralax, .img-paralax2'),
function(node) {
node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
}
);
}
}
You can actually use single handler to do the job 您实际上可以使用单个处理程序来完成工作
function scrollBanner() {
var scrollPos = window.scrollY;
if (scrollPos <= 400) {
[].forEach.call(
document.querySelectorAll('.img-paralax, .img-paralax2'),
function(node) {
node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
var text = node.querySelector('h1');
text.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
text.style.opacity = 1 - scrollPos/400;
}
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.