如果单击下一个元素（） - Jquery答案

【问题标题】：If next element is clicked() - Jquery如果单击下一个元素（） - Jquery
【发布时间】：2017-01-12 19:02:49
【问题描述】：

我的滑块控件有这段 html 代码：

<div class="et-pb-controllers">

<a href="#" class="">1</a>
<a href="#" class="">2</a>
<a href="#" class="">3</a>
<a href="#" class="">4</a>
<a href="#" class="">5</a>
<a href="#" class="et-pb-active-control">6</a>
<a href="#">7</a><a href="#">8</a>
<a href="#">9</a><a href="#">10</a>

</div>

使用标记当前设置的幻灯片的 et-pb-active-control 类。所以我想要有 5 个可见的轮播控制器。

每个元素的高度为 95 像素，带有边距（滑块控件是垂直的）。因此，我想在每个控件上添加 -95 px 的下一个最高值的每次点击，这将使我的控件滑动（使用 CSS 动画），只留下 5 个控件再次可见（从现在的 2-6 个控件而不是 1-5 个）。我找不到 jquery 获取类 et-pb-active-control 的元素以及是否单击下一个元素或下一个 2 个元素的方法。

希望我足够清楚。提前致谢。

【问题讨论】：

“希望我足够清楚。” 从这里的角度来看，并不完全清楚什么是要求。当单击.et-pb-active-control 时，您是否尝试设置.et-pb-active-control 后面的元素的css top？您能否在 Question 中包含您尝试解决问题的 css 和 javascript？
有很多关于旋转木马的教程，但无论如何我都会给你一个提示：你应该将a 元素包装在另一个 div 中。这样你只需要用 CSS 移动这个 div 并为其设置动画，而不是用所有元素来做

标签： javascript jquery css slider carousel

【解决方案1】：

$(document).ready(function(){

  $(document).on("click",".et-pb-active-control", function(){

    $(this).next().css("background-color", "red");

  });

});

Example

【讨论】：

【解决方案2】：

试试这个

var position = 0;	
		$('.next').click(function(){
			position = parseInt(position) -95;
			$('.et-pb-controllers').css("top",position);
			console.log('here');
		})
		$('.prev').click(function(){
			position = parseInt(position) +95;
			$('.et-pb-controllers').css("top",position);
         })

.wrap{
				height: 475px;
				width: 600px;
			}
			.wrap-controllers{
				height: 100%;
				width: 10%;
				display: inline-block;
				overflow: hidden;
				position: relative;
			}
			.wrap-controllers a{
				height: 95px;
				display: block;
			}
			.slider{
				height: 100%;
				width: 89%;
				background: gray;
				display: inline-block;
			}
			.et-pb-controllers{
				top: 0;
				position: absolute;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
		  <div class="slider">
		  </div>
		  <div class="wrap-controllers">
			  <div class="et-pb-controllers">

			    <a href="#" class="">1</a>
			    <a href="#" class="">2</a>
			    <a href="#" class="">3</a>
			    <a href="#" class="">4</a>
			    <a href="#" class="">5</a>
			    <a href="#" class="et-pb-active-control">6</a>
			    <a href="#">7</a>
			    <a href="#">8</a>
			    <a href="#">9</a>
			    <a href="#">10</a>

			  </div>
			</div>
		</div>
<button class="prev">Prev</button>
<button class="next">Next</button>

【讨论】：