我正在尝试编写一个代码，根据类名对 div 进行排序，并使用切换 show(); 的按钮；如果该类存在但 hide();如果该类不存在。我没有收到任何错误，但代码不想按照我认为的方式工作？当您单击我的预览中的按钮时，它会隐藏具有类名称的 id，并且对不具有类名称的 id 不执行任何操作。
CSS
<html>
<head>
<title>Sorting</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
</head>
<body>
<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button active">everyone</button>
<button id="lions" class="sort-button">lions</button>
<button id="tigers" class="sort-button">tigers</button>
<button id="bears" class="sort-button">bears</button>
<textarea id="search" class="sort-button" placeholder="search"></textarea></div>
<div class="sort-hold">
<div id="member" class="lions all">member name - lion</div>
<div id="member" class="tigers all">member name - tiger</div>
<div id="member" class="bears all">member name - bear</div>
</div>
</div>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
JS
var btnWrap = document.getElementById("button-wrap");
// Get all buttons with class="btn" inside the container
var btns = btnWrap.getElementsByClassName("sort-button");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
$("#everyone").click(sortEveryone);
function sortEveryone() {
console.log("button clicked!")
$("#member").show();
};
$("#lions").click(sortOne);
function sortOne() {
console.log("button clicked!")
if($("#member").hasClass(".lions")){
$("#member").show();
} else {
$("#member").hide();
}
};
最佳答案
您可以使用一种更通用的方法来完成此操作，对所有按钮使用一键式监听器，并检查发生事件的按钮的 ID 并做出相应 react
const $items = $('.sort-hold').children()
$('.sort-button').click(function(){
// remove active class from other buttons
$('.sort-button.active').removeClass('active');
// make this button active
$(this).addClass('active');
// hide/show logic
if(this.id === 'everyone'){
$items.show()
}else{
$items.hide().filter('.' + this.id).show();
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button active">everyone</button>
<button id="lions" class="sort-button">lions</button>
<button id="tigers" class="sort-button">tigers</button>
<button id="bears" class="sort-button">bears</button>
</div>
<div class="sort-hold">
<div class="lions all">member name - lion</div>
<div class="tigers all">member name - tiger</div>
<div class="bears all">member name - bear</div>
</div>
</div>关于javascript - 如果 id 具有特定类，则使用 JS/jQuery Show() + Hide() 进行排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62526013/