jQuery .each 自动更新并创建全局变量？
jQuery .each update automatically and create global variable?
我对编码还很陌生。我正在尝试使用 greensock 可拖动创建滚动效果。我希望我的 div 仅在我的另一个 div 的内容超过其父项的高度值时才拖动。这是我正在使用的代码笔 - https://codepen.io/kbeats/pen/vVYGOX
到目前为止，我的拖动和滚动代码是：
Draggable.create("#scrollIcon", {
type: "y",
bounds: "#toc",
onDrag: scroll
});
$(".tile").each(function(){
var height = $(this).height();
});
function scroll(){
if(height > $(toc).height()){
TweenMax.set(".tile", {y: this.y * -1})
}
}
console.log 表示 'height' 未定义，所以我猜它只是作为局部变量存储？有没有一种方法可以遍历每个 .tile class 并创建一个总高度的全局变量，该变量将在高度变化时自动更新？ （或者可能只是在每次单击 .tile 元素时更新？）
最终，我试图让我的 'scroll' div 仅在 .tile class 内容超过父 (#toc) 高度时滚动，然后以某种方式创建一个等式滚动量将根据 .tile class 的总高度进行调整。 （所以它总是能够滚动浏览所有内容，但不会过冲）。
这个部分的问题是：
$(".tile").each(function(){
var height = $(this).height();
});
height 仅在该范围内可用。此外，您想要求和高度，而不仅仅是 .tile 之一的高度。相反，您应该在 scroll 函数内部执行 each，然后求和高度。
另外，您将希望通过图块总计和目录之间的高度比来缩放补间，因为您希望滚动的数量不仅仅基于滚动条的绝对高度。而不是 this.y * -1，您可能想要更像 this.y * height / $(toc).height() * -1.
的东西
function scroll(){
var height= 0;
$('.tile').each(function() {
height += $(this).height();
});
if(height > $(toc).height()) {
TweenMax.set(".tile", {
y: this.y * height / $(toc).height() * -1
});
}
var base = document.getElementById("Base");
var tab = document.getElementById("Tab");
var arrows = document.getElementById("tocArrows");
var content = document.getElementsByClassName("tile");
var toc = document.getElementById("toc");
//
// variables for slides
var oneSlideOne = document.getElementById("oneSlideOne");
var oneSlideTwo = document.getElementById("oneSlideTwo");
var twoSlideOne = document.getElementById("twoSlideOne");
var twoSlideTwo = document.getElementById("twoSlideTwo");
// menu open and close timeline
var tl = new TimelineMax({
paused: true,
reversed: true
});
tl.to(base, .5, {
x: 280,
ease: Sine.easeInOut
});
tl.to("#start1", 0.8, {
morphSVG: "#end1",
ease: Back.easeInOut
}, 0);
tl.to("#start2", 0.8, {
morphSVG: "#end2",
ease: Back.easeInOut
}, 0);
arrows.addEventListener("mousedown", openMenu);
function openMenu() {
tl.reversed() ? tl.play() : tl.reverse();
}
// making the accordion menu
var acc = document.getElementsByClassName("tile");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener('click', function() {
this.classList.toggle("active");
var $panel = $("ul, li", this);
this.classList.contains("active") ? $panel.show() : $panel.hide();
})
}
// gsap for custom scroll bar?
Draggable.create("#scrollIcon", {
type: "y",
bounds: "#toc",
onDrag: scroll
});
function scroll() {
var height = 0;
$('.tile').each(function() {
height += $(this).height();
});
if (height > $(toc).height()) {
TweenMax.set(".tile", {
y: this.y * height / $(toc).height() * -1
})
}
}
.base {
height: 250px;
width: 280px;
background-color: #17307F;
position: absolute;
left: -280px;
top: 0px;
}
.tab {
background-color: #17307F;
position: absolute;
width: 80px;
height: 80px;
left: 280px;
border-radius: 0px 0px 20px 0px;
}
#scrollIcon {
background-color: white;
width: 25px;
height: 50px;
position: relative;
float: right;
margin-top: 20px;
margin-right: 15px;
border-radius: 30px;
cursor: pointer;
}
#tocArrows {
width: 50px;
height: 50px;
display: inline;
margin: 0 auto;
padding-top: 15px;
padding-left: 15px;
cursor: pointer;
}
#tocReverse {
width: 50px;
height: 50px;
display: inline;
margin: 0 auto;
cursor: pointer;
position: relative;
top: -52px;
visibility: hidden;
}
ul#toc {
list-style: none;
display: block;
height: 200px;
overflow: hidden;
/*overflow-y: scroll;
overflow-x: hidden;*/
}
li {
position: relative;
left: -40px;
text-decoration: none;
display: block;
}
li .subTile {
display: none;
}
.tile {
background-color: #74A3EB;
width: 220px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
color: white;
font-family: lato;
font-weight: 700;
font-size: 24px;
line-height: 40px;
text-align: center;
cursor: pointer;
margin: 10px 2px 0px 10px;
transition: 0.4s ease-in-out;
display: block;
top: 0px;
left: -40px;
}
.active,
.tile:hover {
background-color: #3C72F0;
/* change this color */
}
.subTile {
display: none;
position: relative;
background-color: #99B4FF;
width: 200px;
height: 40px;
border-radius: 10px;
display: none;
overflow: hidden;
max-height: 100%;
color: white;
font-family: lato;
text-align: center;
line-height: 40px;
font-size: 20px;
margin: 0px 10px 6px 10px;
cursor: default;
transition: background-color 0.2s ease-in-out;
}
.subTile:hover {
background-color: #F2BB22;
}
#twoSlideTwo {
font-size: 16px;
height: 60px;
line-height: 30px;
}
#twoSlideThree {
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
<div class=base id="Base">
<div class=tab id="Tab">
<svg id="tocArrows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocArrows</title><polyline id="start1" points="15.07 3 43.71 31.64 15.07 60.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="start2" points="3 9.96 24.68 31.64 3 53.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
<svg id="tocReverse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocReverse</title><polyline id="end1" points="32.88 60.28 4.24 31.64 32.88 3" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="end2" points="44.95 53.32 23.27 31.64 44.95 9.96" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
</div>
<div class="scrollPane" id="scrollIcon"> </div>
<ul id="toc">
<li class="tile" id="moduleOneTitle"> Module One
<ul>
<li class="subTile modOne" id="oneSlideOne"> Title Slide </li>
<li class="subTile modOne" id="oneSlideTwo"> References </li>
<li class="subTile modOne" id="oneSlideThree"> Introduction </li>
<li class="subTile modOne" id="oneSlideFour"> Next Slide </li>
</ul>
</li>
<li class=tile id="moduleTwoTitle"> Module Two
<ul>
<li class="subTile modTwo" id="twoSlideOne"> Title Slide </li>
<li class="subTile modTwo" id="twoSlideTwo"> Third Slide Long Name </li>
<li class="subTile modTwo" id="twoSlideThree"> Fourth Slide Long </li>
</ul>
</li>
</ul>
</div>
我对编码还很陌生。我正在尝试使用 greensock 可拖动创建滚动效果。我希望我的 div 仅在我的另一个 div 的内容超过其父项的高度值时才拖动。这是我正在使用的代码笔 - https://codepen.io/kbeats/pen/vVYGOX
到目前为止，我的拖动和滚动代码是：
Draggable.create("#scrollIcon", {
type: "y",
bounds: "#toc",
onDrag: scroll
});
$(".tile").each(function(){
var height = $(this).height();
});
function scroll(){
if(height > $(toc).height()){
TweenMax.set(".tile", {y: this.y * -1})
}
}
console.log 表示 'height' 未定义，所以我猜它只是作为局部变量存储？有没有一种方法可以遍历每个 .tile class 并创建一个总高度的全局变量，该变量将在高度变化时自动更新？ （或者可能只是在每次单击 .tile 元素时更新？）
最终，我试图让我的 'scroll' div 仅在 .tile class 内容超过父 (#toc) 高度时滚动，然后以某种方式创建一个等式滚动量将根据 .tile class 的总高度进行调整。 （所以它总是能够滚动浏览所有内容，但不会过冲）。
这个部分的问题是：
$(".tile").each(function(){
var height = $(this).height();
});
height 仅在该范围内可用。此外，您想要求和高度，而不仅仅是 .tile 之一的高度。相反，您应该在 scroll 函数内部执行 each，然后求和高度。
另外，您将希望通过图块总计和目录之间的高度比来缩放补间，因为您希望滚动的数量不仅仅基于滚动条的绝对高度。而不是 this.y * -1，您可能想要更像 this.y * height / $(toc).height() * -1.
function scroll(){
var height= 0;
$('.tile').each(function() {
height += $(this).height();
});
if(height > $(toc).height()) {
TweenMax.set(".tile", {
y: this.y * height / $(toc).height() * -1
});
}
var base = document.getElementById("Base");
var tab = document.getElementById("Tab");
var arrows = document.getElementById("tocArrows");
var content = document.getElementsByClassName("tile");
var toc = document.getElementById("toc");
//
// variables for slides
var oneSlideOne = document.getElementById("oneSlideOne");
var oneSlideTwo = document.getElementById("oneSlideTwo");
var twoSlideOne = document.getElementById("twoSlideOne");
var twoSlideTwo = document.getElementById("twoSlideTwo");
// menu open and close timeline
var tl = new TimelineMax({
paused: true,
reversed: true
});
tl.to(base, .5, {
x: 280,
ease: Sine.easeInOut
});
tl.to("#start1", 0.8, {
morphSVG: "#end1",
ease: Back.easeInOut
}, 0);
tl.to("#start2", 0.8, {
morphSVG: "#end2",
ease: Back.easeInOut
}, 0);
arrows.addEventListener("mousedown", openMenu);
function openMenu() {
tl.reversed() ? tl.play() : tl.reverse();
}
// making the accordion menu
var acc = document.getElementsByClassName("tile");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener('click', function() {
this.classList.toggle("active");
var $panel = $("ul, li", this);
this.classList.contains("active") ? $panel.show() : $panel.hide();
})
}
// gsap for custom scroll bar?
Draggable.create("#scrollIcon", {
type: "y",
bounds: "#toc",
onDrag: scroll
});
function scroll() {
var height = 0;
$('.tile').each(function() {
height += $(this).height();
});
if (height > $(toc).height()) {
TweenMax.set(".tile", {
y: this.y * height / $(toc).height() * -1
})
}
}
.base {
height: 250px;
width: 280px;
background-color: #17307F;
position: absolute;
left: -280px;
top: 0px;
}
.tab {
background-color: #17307F;
position: absolute;
width: 80px;
height: 80px;
left: 280px;
border-radius: 0px 0px 20px 0px;
}
#scrollIcon {
background-color: white;
width: 25px;
height: 50px;
position: relative;
float: right;
margin-top: 20px;
margin-right: 15px;
border-radius: 30px;
cursor: pointer;
}
#tocArrows {
width: 50px;
height: 50px;
display: inline;
margin: 0 auto;
padding-top: 15px;
padding-left: 15px;
cursor: pointer;
}
#tocReverse {
width: 50px;
height: 50px;
display: inline;
margin: 0 auto;
cursor: pointer;
position: relative;
top: -52px;
visibility: hidden;
}
ul#toc {
list-style: none;
display: block;
height: 200px;
overflow: hidden;
/*overflow-y: scroll;
overflow-x: hidden;*/
}
li {
position: relative;
left: -40px;
text-decoration: none;
display: block;
}
li .subTile {
display: none;
}
.tile {
background-color: #74A3EB;
width: 220px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
color: white;
font-family: lato;
font-weight: 700;
font-size: 24px;
line-height: 40px;
text-align: center;
cursor: pointer;
margin: 10px 2px 0px 10px;
transition: 0.4s ease-in-out;
display: block;
top: 0px;
left: -40px;
}
.active,
.tile:hover {
background-color: #3C72F0;
/* change this color */
}
.subTile {
display: none;
position: relative;
background-color: #99B4FF;
width: 200px;
height: 40px;
border-radius: 10px;
display: none;
overflow: hidden;
max-height: 100%;
color: white;
font-family: lato;
text-align: center;
line-height: 40px;
font-size: 20px;
margin: 0px 10px 6px 10px;
cursor: default;
transition: background-color 0.2s ease-in-out;
}
.subTile:hover {
background-color: #F2BB22;
}
#twoSlideTwo {
font-size: 16px;
height: 60px;
line-height: 30px;
}
#twoSlideThree {
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
<div class=base id="Base">
<div class=tab id="Tab">
<svg id="tocArrows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocArrows</title><polyline id="start1" points="15.07 3 43.71 31.64 15.07 60.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="start2" points="3 9.96 24.68 31.64 3 53.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
<svg id="tocReverse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocReverse</title><polyline id="end1" points="32.88 60.28 4.24 31.64 32.88 3" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="end2" points="44.95 53.32 23.27 31.64 44.95 9.96" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
</div>
<div class="scrollPane" id="scrollIcon"> </div>
<ul id="toc">
<li class="tile" id="moduleOneTitle"> Module One
<ul>
<li class="subTile modOne" id="oneSlideOne"> Title Slide </li>
<li class="subTile modOne" id="oneSlideTwo"> References </li>
<li class="subTile modOne" id="oneSlideThree"> Introduction </li>
<li class="subTile modOne" id="oneSlideFour"> Next Slide </li>
</ul>
</li>
<li class=tile id="moduleTwoTitle"> Module Two
<ul>
<li class="subTile modTwo" id="twoSlideOne"> Title Slide </li>
<li class="subTile modTwo" id="twoSlideTwo"> Third Slide Long Name </li>
<li class="subTile modTwo" id="twoSlideThree"> Fourth Slide Long </li>
</ul>
</li>
</ul>
</div>