[英]Using 'nth' selectors in jQuery to target specific classes
I'm still learning jQuery, and am unable to work out how to cleanly use 'nth' selectors to target the classes I want - even after looking at 'similar' threads, as I do not understand some of the code. 我仍在学习jQuery,无法解决如何干净地使用'nth'选择器来定位所需的类-即使在查看了“相似”线程之后,因为我不理解某些代码。
My Goals: 我的目标:
Please see my jsFiddle here: https://jsfiddle.net/0azykcto/4/ 请在这里查看我的jsFiddle: https ://jsfiddle.net/0azykcto/4/
For the website I am creating, there is potential that the person is going to add additional 'primary filter' buttons occasionally, along with a set of 'secondary filters' to go with them. 对于我正在创建的网站,该人员可能偶尔会添加其他“主要过滤器”按钮,以及与之配套的一组“辅助过滤器”。
$(document).ready(function(){
$("#primary-filters .btn:nth-child(1)").click(function(){
$('.secondary-filters:nth-child(2)').toggleClass("height");
});
$("#primary-filters .btn:nth-child(2)").click(function(){
$('.secondary-filters:nth-child(3)').toggleClass("height");
});
$("#primary-filters .btn:nth-child(3)").click(function(){
$('.secondary-filters:nth-child(4)').toggleClass("height");
});
});
I was hoping there might be an easy way to loop this process perhaps. 我希望也许有一种简单的方法可以循环此过程。 If anyone is able to point me in the rough direction of what I'm missing/how I might achieve this, that would be much appreciated. 如果有人能够指出我所缺少的方向/如何实现这一目标,那将不胜感激。
You can rely on indexes to make this easier and also use show/hide like below 您可以依靠索引来简化此操作,也可以如下所示使用show / hide
$(document).ready(function() { var sel = "#primary-filters .btn"; $(sel).click(function() { var i = $(sel).index(this); $('.secondary-filters').hide(); /*Hide all*/ $('.secondary-filters').eq(i).show(); /*show the needed one*/ }); });
#primary-filters .btn:nth-child(1) { background: #dd6565; } #primary-filters .btn:nth-child(2) { background: #6587dd; } #primary-filters .btn:nth-child(3) { background: #65dd6e; } .secondary-filters { background: #F1F1F1; overflow: hidden; display:none; } .secondary-filters:nth-child(2) .btn { background: red; } .secondary-filters:nth-child(3) .btn { background: blue; } .secondary-filters:nth-child(4) .btn { background: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-container"> <div id="primary-filters"> <button class="btn">Filter One</button> <button class="btn">Filter Two</button> <button class="btn">Filter Three</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> </div>
Or fade functions: 或淡入淡出功能:
$(document).ready(function() { var sel = "#primary-filters .btn"; $(sel).click(function() { var i = $(sel).index(this); $('.secondary-filters').hide(); $('.secondary-filters').eq(i).fadeIn(); }); });
#primary-filters .btn:nth-child(1) { background: #dd6565; } #primary-filters .btn:nth-child(2) { background: #6587dd; } #primary-filters .btn:nth-child(3) { background: #65dd6e; } .secondary-filters { background: #F1F1F1; overflow: hidden; display:none; } .secondary-filters:nth-child(2) .btn { background: red; } .secondary-filters:nth-child(3) .btn { background: blue; } .secondary-filters:nth-child(4) .btn { background: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-container"> <div id="primary-filters"> <button class="btn">Filter One</button> <button class="btn">Filter Two</button> <button class="btn">Filter Three</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.