從相關部分刪除有源 class

Question

我正在嘗試編寫一個代碼，它只會從當前部分中刪除活動的 class，而不是從其他部分中刪除。 但是我的代碼也從其他部分刪除了活動的 class 。 我在這里做錯了什么？

 $( document ).ready(function() { $(".nav li button").click(function(){ $(".nav li button").removeClass("active"); $(this).addClass("active"); }); });

 .nav{ margin:0 0 15px; padding:0; list-style:none; }.nav li{ display:inline-block; }.nav li button.active{ background:green; color:#fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list-container"> <ul class="nav"> <li><button>Button 1</button></li> <li><button>Button 2</button></li> <li><button>Button 3</button></li> </ul> <ul class="nav"> <li><button>Button 1</button></li> <li><button>Button 2</button></li> <li><button>Button 3</button></li> </ul> </div>

Answer 1

您可以使用.closest()查找ul引用當前部分，然后使用.find()查找其中的所有li button並從中刪除active class ：

 $( document ).ready(function() { $(".nav li button").click(function(){ $(this).closest('ul').find('li button').removeClass("active"); $(this).addClass("active"); }); });

 .nav{ margin:0 0 15px; padding:0; list-style:none; }.nav li{ display:inline-block; }.nav li button.active{ background:green; color:#fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list-container"> <ul class="nav"> <li><button>Button 1</button></li> <li><button>Button 2</button></li> <li><button>Button 3</button></li> </ul> <ul class="nav"> <li><button>Button 1</button></li> <li><button>Button 2</button></li> <li><button>Button 3</button></li> </ul> </div>