将jquery事件与相同的classname元素分开
[英]Separating jquery events from same classname elements
问题描述
我正在尝试使用两个按钮制作一个可滚动的项目列表：上下。 我的目标是每当我单击两个按钮中的任何一个时都显示一个项目。 我使用的是jQuery事件slideUp()但是每当我单击按钮时，所有列表项就会向上滑动。 我无法为每个项目分开活动。 救命？
$(document).ready(function(){ $(".bott").click( function() { $(".item").slideUp(); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TEST</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link href="css/style.css" rel="stylesheet"> <script src="js/menuscroll.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav justify-content-center"> <li class="nav-item"> Home </li> <li class="nav-item"> About </li> <li class="nav-item"> Services </li> <li class="nav-item"> Contact </li> </ul> </div> <div class="col-sm-3"> <div class="menu-wrapper"> <div class="scroll-bottom"> <button type="button" class="bott btn-block">DOWN</button> </div> <div class="scroll-top"> <button type="button" class="bott2 btn-block" >UP</button> </div> <ul class="menu"> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item">D</li> <li class="item">E</li> <li class="item">F</li> <li class="item">G</li> <li class="item">H</li> <li class="item">I</li> <li class="item">J</li> </ul> </div> <div class="paddles"> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2018-04-30 06:04:05
$(document).ready(function(){ var i = 0; $(".bott").click( function() { $(".item:eq("+i+")").slideUp(); i++; }); $(".bott2").click( function() { i--; $(".item:eq("+i+")").slideDown(); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TEST</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link href="css/style.css" rel="stylesheet"> <script src="js/menuscroll.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav justify-content-center"> <li class="nav-item"> Home </li> <li class="nav-item"> About </li> <li class="nav-item"> Services </li> <li class="nav-item"> Contact </li> </ul> </div> <div class="col-sm-3"> <div class="menu-wrapper"> <div class="scroll-bottom"> <button type="button" class="bott btn-block">DOWN</button> </div> <div class="scroll-top"> <button type="button" class="bott2 btn-block" >UP</button> </div> <ul class="menu"> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item">D</li> <li class="item">E</li> <li class="item">F</li> <li class="item">G</li> <li class="item">H</li> <li class="item">I</li> <li class="item">J</li> </ul> </div> <div class="paddles"> </div> </div> </body> </html>
解决方案2
0 已采纳 2018-04-30 06:26:55
维护一个计数器以跟踪您要向上或向下滑动的项目。 请查看以下示例，为做同样sideDown() counter--上sliceDown（））。
$(document).ready(function(){ var counter = 1; $(".bott").click( function() { $(".item:nth-child(" + counter + ")").slideUp(); counter++; }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TEST</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link href="css/style.css" rel="stylesheet"> <script src="js/menuscroll.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav justify-content-center"> <li class="nav-item"> Home </li> <li class="nav-item"> About </li> <li class="nav-item"> Services </li> <li class="nav-item"> Contact </li> </ul> </div> <div class="col-sm-3"> <div class="menu-wrapper"> <div class="scroll-bottom"> <button type="button" class="bott btn-block">DOWN</button> </div> <div class="scroll-top"> <button type="button" class="bott2 btn-block" >UP</button> </div> <ul class="menu"> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item">D</li> <li class="item">E</li> <li class="item">F</li> <li class="item">G</li> <li class="item">H</li> <li class="item">I</li> <li class="item">J</li> </ul> </div> <div class="paddles"> </div> </div> </body> </html>
分隔点击事件的DOM元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.