下一个和上一个不能正常使用jQuery [英] Next and previous not working properly using jQuery

问题描述

我正在研究下一部分和上一部分。当我点击下一个按钮时，它显示下一个div，但它不能正常工作，因为下一个按钮正在运行infinit。

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

我尝试了一些代码

new WOW（）.init（）; （function（）{function scrollHorizo​​ntally（e）{e = window.event || e; var delta = Math.max（-1，Math.min（1，（e.wheelDelta || -e.detail）））; （document.getElementById（'gentags'）。addEventListener）{// IE9，Chrome， Safari，Opera document.getElementById（'gentags'）。addEventListener（mousewheel，scrollHorizo​​ntally，false）; // Firefox document.getElementById（'gentags'）。addEventListener（DOMMouseScroll，scrollHorizo​​ntally，false）;} else { / IE 6/7/8 document.getElementById（'gentags'）。attachEvent（onmousewheel，scrollHorizo​​ntally）;}}）（）; $（'。navigation_right'）。click（function（）{$（'。current '）.removeClass（'current'）。hide（）.next（）。show（）。addClass（'current'）; if（$（'。current'）。hasClass（'last'））{$（' .navigation_right '）。ATTR（' 禁用， 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; / *删除滚动条空间* /背景：透明; / *可选：使滚动条不可见* /} / *可选：以红色显示位置指示符* / ::  -  webkit-scrollbar-thumb {background：transparent;}。horizo​​ntal_scroll .full_screen_100 article {width：11.58％;身高：100％;向左飘浮; border-left：solid 1px＃E2E2E2;}。active_div {display：none;} / *导航风格* / .horizo​​ntal_scroll_icon_pre_next {bottom：50px;左：0;位置：固定;宽度：100％;身高：0; / * padding：0 20px; * /} .horizo​​ntal_scroll_icon_pre_next button {background-color：transparent; border：none; font-size：0; color：＃7b7b7b; display：none; outline：0; cursor：pointer;}。horizo​​ntal_scroll_icon_pre_next button.navigation_left {float：left;}。horizo​​ntal_scroll_icon_pre_next button.navigation_right {float：right;}。horizo​​ntal_scroll_icon_pre_next button.active {display：block;}。horizo​​ntal_scroll_icon_pre_next button span {font-size：30px;}  
 < link rel =stylesheettype =text / csshref =https ：//cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css> < link rel =stylesheethref =https://cdn.linearicons.com/free/1.0.0/icon-font.min.css><！ -  icon  - > < div class =active_div> < h2>我想在文章7出现在屏幕上时显示此div< / h2> < / div>< div id =gentags>< div class =horizo​​ntal_scroll> < div class =full_screen_100id =left_scroll> < article class =wow fadeInUp first current>< div>< p class =scroll_number> 01< / p>< span class =page_slogan>将鼠标悬停并滚动鼠标滚轮<跨度>< / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 02< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> ;< / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 03< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> < / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 04< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> < / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 05< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> < / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 06< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> < / DIV>< /冠词GT; < article class =wow fadeInUp>< div>< p class =scroll_number> 07< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> < / DIV>< /冠词GT; < article class =wow fadeInUp last>< div>< p class =scroll_number> 08< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span> ;< / DIV>< /冠词GT; < / div>< / div>< / div>< div class =horizo​​ntal_scroll_icon_pre_next> < button class =navigation_left active>< span class =lnr lnr-arrow-left>< / span>上一页< / button> < button class =navigation_right active>< span class =lnr lnr-arrow-right>< / span>下一步< / button> < / div><！ -  horizo​​ntal_scroll_navigation  - >< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< ; /脚本> < script src =https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js>< / script>   
解决方案
在您现有的代码中，您正在执行操作，然后检查是否禁用条件。而是存储当前和下一个元素，如果下一个元素可用，则执行操作。因此，如果 next / prev 元素不可用，则不会执行任何操作，您也不必手动禁用/启用按钮。
 
 
 
在prev上，你将不得不显示前一个元素，但你也必须显示当前元素。
 
 
 
既然你不想去到最后元素，你可以做的是检查最后一个元素是否在屏幕上完全可见。如果可见，禁用按钮，否则启用它。
 > function enableDisableButtonState（context，value）{
 $（'[class ^ = navigation _]'）。attr（'disabled'，false）; 
 $（context）.attr（'disabled'，value）; 
 
 $ b $（'。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）; 
}）; 
 $ b $（'。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;显示：inline-block;宽度：100％; overflow：hidden;}＃gentags> div {overflow：hidden; width：250％;} ::  -  webkit-scrollbar {width：0px; / *删除滚动条空间* /背景：透明; / *可选：使滚动条不可见* /} / *可选：以红色显示位置指示符* / ::  -  webkit-scrollbar-thumb {background：transparent;}。horizo​​ntal_scroll .full_screen_100 article {width：11.58％;身高：100％;向左飘浮; border-left：solid 1px＃E2E2E2;}。active_div {display：none;} / *导航风格* /。horizo​​ntal_scroll_icon_pre_next {bottom：50px;左：0;位置：固定;宽度：100％;身高：0; / * padding：0 20px; * /}。horizo​​ntal_scroll_icon_pre_next button {background-color：transparent; border：none; font-size：0;颜色：＃7b7b7b;显示：无;大纲：0; cursor：pointer;}。horizo​​ntal_scroll_icon_pre_next button.navigation_left {float：left;}。horizo​​ntal_scroll_icon_pre_next button.navigation_right {float：right;}。horizo​​ntal_scroll_icon_pre_next button.active {display：block;}。horizo​​ntal_scroll_icon_pre_next button span {font-size：30px;} .horizo​​ntal_scroll {overflow：hidden;} button [class ^ ='navigation_'] {transition：0.4s;} button [class ^ ='navigation _']：disabled {opacity：0.2; transition：0.4s;}  

< link rel = stylesheettype =text / csshref =https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css>< link rel =stylesheethref =https：/ /cdn.linearicons.com/free/1.0.0/icon-font.min.css\">< ;;;;;;;;gt;< div class =active_div> < h2>我想在文章7出现在屏幕上时显示此div< / h2>< / div>< div id =gentags> < div class =horizo​​ntal_scroll> < div class =full_screen_100id =left_scroll> < article class =wow fadeInUp first current> < DIV> < p class =scroll_number> 01< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 02< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 03< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 04< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 05< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 06< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp> < DIV> < p class =scroll_number> 07< / p>< span class =page_slogan>悬停我并滚动鼠标滚轮< / span>< / div> < /冠词GT; < article class =wow fadeInUp last> < DIV> < p class =scroll_number> 08< / p>< span class =page_slogan>悬停并滚动鼠标滚轮< / span>< / div> < /冠词GT; < / DIV> < / div>< / div>< div class =horizo​​ntal_scroll_icon_pre_next> < button class =navigation_left activedisabled>< span class =lnr lnr-arrow-left>< / span>上一页< / button> < button class =navigation_right active>< span class =lnr lnr-arrow-right>< / span>下一个< / button>< / div><！ - horizo​​ntal_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>

I am working on the next and previous section. When I clicked on next button then it's displaying the next div but it's not working properly because Next button is working infinit.

Same as the previous button. I need to hide the previous button on page load when the user clicked on next button or scroll the mouse wheel than I have to display the previous button.

I tried some code

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>

解决方案

In your existing code, you are performing operation and then checking for disabled condition. Instead, store current and next element and if next element is available, perform operation. So if next/prev element is not available, no operation will be performed and you do not have to manually disable/enable button.

On prev, you will have to show previous element but you will have to show current element as well.

Since you do not want to go till last element, what you can do is to check if last element is fully visible on screen or not. If it is visible, disable button, else enable it.

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'));
});

Sample Code:

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>

这篇关于下一个和上一个不能正常使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！