javascript - 使用 jQuery 时下一个和上一个无法正常工作

标签 javascript jquery html

我正在处理下一个和上一个部分。当我单击“下一个”按钮时，它会显示下一个 div，但它无法正常工作，因为“下一个”按钮无限工作。

与上一个按钮相同。当用户单击下一个按钮或滚动鼠标滚轮时，我需要在页面加载时隐藏上一个按钮，而不是显示上一个按钮。

我尝试了一些代码

new WOW().init();
	(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

$('.navigation_right').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('.navigation_right').attr('disabled', true);
    }
    $('.navigation_left').attr('disabled', null);
});

$('.navigation_left').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('.navigation_left').attr('disabled', true);
    }
    $('.navigation_right').attr('disabled', null);
});
		#gentags {
position:fixed;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow: hidden;
}

#gentags > div{
    overflow: hidden;
    width:250%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 11.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}
.active_div{

display: none;
}

  /*Navigation style*/
  .horizontal_scroll_icon_pre_next {
    bottom: 50px;
    left: 0;
    
    position: fixed;
    
    width: 100%;
    height: 0;
   /* padding: 0 20px;*/
}
  .horizontal_scroll_icon_pre_next button{
  background-color: transparent;
border: none;
font-size: 0;
color: #7b7b7b;
display: none;
outline: 0;
cursor: pointer;
}
.horizontal_scroll_icon_pre_next button.navigation_left
{
	float: left;
}
.horizontal_scroll_icon_pre_next button.navigation_right
{
	float:right;
}

.horizontal_scroll_icon_pre_next button.active {
    display: block;
}
.horizontal_scroll_icon_pre_next button span {

    font-size: 30px;
}
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
	    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><!--icon-->
	<div class="active_div">
		<h2>I want to display this div when articles 7 comes on screen</h2>
	</div>

<div id="gentags">
<div class="horizontal_scroll">
		<div class="full_screen_100" id="left_scroll">
			<article class="wow fadeInUp first current"><div><p class="scroll_number">01</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">02</p><span class="page_slogan">Hover me and scroll mouse wheel </span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">03</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">04</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">05</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">06</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp"><div><p class="scroll_number">07</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
			<article class="wow fadeInUp last"><div><p class="scroll_number">08</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div></article>
	</div>
</div>
</div>


<div class="horizontal_scroll_icon_pre_next">
        <button class="navigation_left active"><span class="lnr lnr-arrow-left"></span>Previous</button>
        <button class="navigation_right active"><span class="lnr lnr-arrow-right"></span>Next</button>
    </div><!--horizontal_scroll_navigation-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

最佳答案

在现有代码中，您正在执行操作，然后检查禁用情况。相反，存储当前和下一个元素，如果下一个元素可用，则执行操作。因此，如果 next/prev 元素不可用，则不会执行任何操作，并且您不必手动禁用/启用按钮。

在上一个元素上，您必须显示上一个元素，但也必须显示当前元素。

由于您不想转到最后一个元素，因此您可以做的是检查最后一个元素在屏幕上是否完全可见。如果它可见，则禁用按钮，否则启用它。

function enableDisableButtonState(context, value) {
  $('[class^=navigation_]').attr('disabled', false);
  $(context).attr('disabled', value);
}

$('.navigation_right').click(function() {
  var current = $('.current');
  var nextEl = current.next();
  var lastArticle = $('article:last');
  if (nextEl.length > 0) {
    current.removeClass('current').hide();
    nextEl.addClass('current').show();
  }
  var isInBounds = lastArticle.position().left < ($(document).width() - lastArticle.width());
  enableDisableButtonState(this, isInBounds);
});

$('.navigation_left').click(function() {
  var current = $('.current');
  var prevEL = current.prev();
  if (prevEL.length > 0) {
    current.removeClass('current');
    prevEL.addClass('current').show();
  }
  enableDisableButtonState(this, prevEL.is(':first-child'));
});

示例代码:

new WOW().init();
(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.getElementById('gentags').scrollLeft -= (delta * 40); // Multiplied by 40
    e.preventDefault();
  }
  if (document.getElementById('gentags').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
  }
})();

function enableDisableButtonState(context, value) {
  $('[class^=navigation_]').attr('disabled', false);
  $(context).attr('disabled', value);
}

$('.navigation_right').click(function() {
  var current = $('.current');
  var nextEl = current.next();
  var lastArticle = $('article:last');
  if (nextEl.length > 0) {
    current.removeClass('current').hide();
    nextEl.addClass('current').show();
  }
  var isInBounds = lastArticle.position().left < ($(document).width() - lastArticle.width());
  enableDisableButtonState(this, isInBounds);
});

$('.navigation_left').click(function() {
  var current = $('.current');
  var prevEL = current.prev();
  if (prevEL.length > 0) {
    current.removeClass('current');
    prevEL.addClass('current').show();
  }
  enableDisableButtonState(this, prevEL.is(':first-child'));
});
#gentags {
  position: fixed;
  margin-top: -.25em;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

#gentags>div {
  overflow: hidden;
  width: 250%;
}

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}


/* optional: show position indicator in red */

::-webkit-scrollbar-thumb {
  background: transparent;
}

.horizontal_scroll .full_screen_100 article {
  width: 11.58%;
  height: 100%;
  float: left;
  border-left: solid 1px #E2E2E2;
}

.active_div {
  display: none;
}


/*Navigation style*/

.horizontal_scroll_icon_pre_next {
  bottom: 50px;
  left: 0;
  position: fixed;
  width: 100%;
  height: 0;
  /* padding: 0 20px;*/
}

.horizontal_scroll_icon_pre_next button {
  background-color: transparent;
  border: none;
  font-size: 0;
  color: #7b7b7b;
  display: none;
  outline: 0;
  cursor: pointer;
}

.horizontal_scroll_icon_pre_next button.navigation_left {
  float: left;
}

.horizontal_scroll_icon_pre_next button.navigation_right {
  float: right;
}

.horizontal_scroll_icon_pre_next button.active {
  display: block;
}

.horizontal_scroll_icon_pre_next button span {
  font-size: 30px;
}

.horizontal_scroll {
  overflow: hidden;
}

button[class^='navigation_'] {
  transition: 0.4s;
}

button[class^='navigation_']:disabled {
  opacity: 0.2;
  transition: 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!--icon-->
<div class="active_div">
  <h2>I want to display this div when articles 7 comes on screen</h2>
</div>

<div id="gentags">
  <div class="horizontal_scroll">
    <div class="full_screen_100" id="left_scroll">
      <article class="wow fadeInUp first current">
        <div>
          <p class="scroll_number">01</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">02</p><span class="page_slogan">Hover me and scroll mouse wheel </span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">03</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">04</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">05</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">06</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp">
        <div>
          <p class="scroll_number">07</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
      <article class="wow fadeInUp last">
        <div>
          <p class="scroll_number">08</p><span class="page_slogan">Hover me and scroll mouse wheel</span></div>
      </article>
    </div>
  </div>
</div>


<div class="horizontal_scroll_icon_pre_next">
  <button class="navigation_left active" disabled><span class="lnr lnr-arrow-left"></span>Previous</button>
  <button class="navigation_right active"><span class="lnr lnr-arrow-right"></span>Next</button>
</div>
<!--horizontal_scroll_navigation-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

关于javascript - 使用 jQuery 时下一个和上一个无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47348339/

上一篇：javascript - Promise.all : What are arguments of promise. all.catch(e)

下一篇：javascript - 如何阻止 Express.js 在浏览器中下载文件？

相关文章：

html - 为什么 Firefox(移动版)会缩小我的网站？

javascript - 在不使用 addEventListener 的情况下在外部单击时隐藏 div

javascript - 根据响应跳过一系列 promise 中的 jQuery promise

javascript - 选择图像不起作用

javascript - jQuery 使用数据属性更改值

jQuery Slider 不拾取换行符上的元素

javascript - 音频 - Chrome 移动版 - Android

javascript - 在 React 组件中使用 ES6 分配属性

javascript - 验证在自动回发时消失

javascript - 创建插件返回这个问题

©2024 IT工具网  联系我们