$(document).ready(function() {
var numberOfItems = $('.item').length;
if (numberOfItems > 4) {
$('.wrapper').mouseover(function() {
$('a.next-arrow').css('display', 'block');
});
$('.wrapper').mouseleave(function() {
$('a.next-arrow').css('display', 'none');
});
}
/**
*
**/
$('a.next-arrow').click(function() {
var i = 1;
while (i <= numberOfItems) { //1, 5
if ($('div.item' + i).css('display').toLowerCase() == 'inline-block') {
$('div.item' + i).css('display', 'none');
break;
}
i = i + 4;
}
});
});
* {
padding: 0px;
border: 0px none;
background: transparent none repeat scroll 0% 0%;
font-size: 100%;
vertical-align: baseline;
}
.wrapper {
position: relative;
white-space: nowrap;
overflow: hidden;
}
div.item {
/*position:absolute;*/
display: inline-block;
width: 25%;
height: 25vw;
}
.wheat {
background-color: wheat;
}
.pink {
background-color: pink;
}
.beige {
background-color: beige;
}
.gainsboro {
background-color: gainsboro;
}
.coral {
background-color: coral;
}
.crimson {
background-color: crimson;
}
.item1 {
left: 0%;
}
.item2 {
left: 25%;
}
.item3 {
left: 50%;
}
.item4 {
left: 75%;
}
.item5 {
left: 100%;
}
.item6 {
left: 125%;
}
.previous-arrow,
.next-arrow {
width: 30px;
height: 50%;
top: 50%;
position: absolute;
display: block;
opacity: 0.7;
/*color: transparent;*/
background-repeat: no-repeat;
margin-top: -30px;
display: none;
}
.previous-arrow {
background-image: url(a2.png);
left: 0px;
}
.next-arrow {
background-image: url(b2.png);
right: 0px;
}
.previous-arrow,
.next-arrow {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<a class="previous-arrow" href=""><</a><!--
--><div class="item item1 wheat">a.</div><!--
--><div class="item item2 pink">a.</div><!--
--><div class="item item3 beige">a.</div><!--
--><div class="item item4 gainsboro">a.</div><!--
--><div class="item item5 coral">a.</div><!--
--><div class="item item6 crimson">a.</div><!--
--><a class="next-arrow" href=""><</a>
</div>
在这个 SSCCE 中,我想使用 JQuery 来处理 .next-arrow
上的点击事件,并且在处理程序中,我想隐藏 .item1
(对于这个例子 - 我已经过度简化来证明我的问题)。当它被隐藏时,.item5
应该会进入屏幕(之前溢出到屏幕之外)。
确实会发生这种情况,但是随后:
在上面可以看到的 SO 编辑器中的代码片段中,它只显示了片刻,然后屏幕变黑了。
在上面链接的 JSFiddle 以及我的电脑上,它只是暂时出现,然后屏幕又回到它的初始外观,即
.item1
再次出现,使得.item4
溢出屏幕。
我试过但未能弄清楚发生了什么。 为什么会这样?我做错了什么?
最佳答案
如果我理解正确,您只需要阻止点击链接的默认操作(目前它会重新加载页面)。
将 event
(您可以使用任何名称)传递给您的函数,并使用 preventDefault()
.
$('a.next-arrow').click(function(event) {
event.preventDefault();
// etc
关于javascript - 为什么由 JQuery 事件处理程序引起的(对 CSS 属性的)更改只会暂时出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33399372/