我不知道为什么,但函数thumbsScroll
只运行第一个警报,然后停止。它甚至没有显示第二个警报。
当拇指数小于5时,该函数应该隐藏'scroll'div。
可能是一个非常简单的问题,但实际上找不到解决方案,并花了很多时间试图找出答案。有什么东西我不会来这里吗?
var mainImg = document.getElementById("main-image");
function thumb1() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/394545.jpg')";
}
function thumb2() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/572806.jpg')";
}
function thumb3() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/486757.jpg')";
}
function thumb4() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612357.jpg')";
}
function thumb5() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612358.jpg')";
}
function thumb6() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/661833.jpg')";
}
function thumbsScroll() {
alert('test - function runs');
var thumbs = document.getElementByClassName('image-thumb');
var desktopThumbsScroll = document.getElementById('scroll-desktop');
var mobileThumbsScroll = document.getElementById('scroll-mobile');
alert('test alert 2 - doesnt work');
if (thumbs.length < 5) {
desktopThumbsScroll.style.display = 'none';
mobileThumbsScroll.style.display = 'none';
alert('if true')
} else {alert('if false')}
}
thumbsScroll();
/* rollovers */
#main-image {
background-image: url('https://cml.sad.ukrd.com/image/661835.jpg');
}
#thumb1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
#thumb5 { background-image: url('https://cml.sad.ukrd.com/image/612358.jpg') }
#thumb6 { background-image: url('https://cml.sad.ukrd.com/image/661833.jpg') }
/* rollovers */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */
}
#hook-container {
background: blue;
float: left;
width: 40%;
height: auto;
padding: 3% 0 0 3%;
}
#images-wrap {
width: 60%;
height: auto;
float: left;
position: relative;
}
#scroll-desktop {
position: absolute;
bottom: -6%;
right: 5%;
font-size: 0.5em;
text-transform: uppercase;
opacity: 0.5;
}
#scroll-desktop > span { font-size: 1.5em }
#scroll-mobile { display: none }
#main-image {
width: 79%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;
}
#image-thumbs {
width: 19%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;
}
.image-thumb {
margin-bottom: 6%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
@media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#scroll-desktop { display: none }
#scroll-mobile {
display: block;
background: yellow;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 0.5em;
opacity: 0.5;
}
#scroll-mobile > span { font-size: 1.5em }
#hook-container {
width: 100%;
padding: 3% 0;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
margin-bottom: 1%;
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 0 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
}
@media (max-width: 400px) {
#scroll-mobile { font-size: 0.25em }
#scroll-mobile > span { font-size: 1em }
}
@media (min-width: 1000px) {
#scroll-desktop {
bottom: -5%;
right: 6%;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb1" onmouseover="thumb1()"></div>
<div class="image-thumb" id="thumb2" onmouseover="thumb2()"></div>
<div class="image-thumb" id="thumb3" onmouseover="thumb3()"></div>
<div class="image-thumb" id="thumb4" onmouseover="thumb4()"></div>
<div class="image-thumb" id="thumb5" onmouseover="thumb5()"></div>
<div class="image-thumb" id="thumb6" onmouseover="thumb6()"></div>
</div>
</div>
<div id='scroll-desktop'>Scroll <span>↓</span></div>
</div>
<div id='scroll-mobile'>Scroll <span>→</span></div>
<div id='hook-container'>
hook container
</div>
</div>
答案 0 :(得分:3)
你绝对应该关注JavaScript控制台。当事情不起作用时,这是第一个看的地方。控制台将尝试为您提供有关代码中错误的提示。
记住快捷方式,控制台在Chrome上的窗口:ctrl-shift-j。
运行提供的脚本时,控制台会告诉您它没有理解getElementByClassName:
答案 1 :(得分:2)
你错误输入
getElementByClassName
应该是
getElementsByClassName
答案 2 :(得分:1)
没有像getElementByClassName
这样的功能。您可以使用document.getElementsByClassName('image-thumb')
来实现目标。