我正在尝试编写一个代码，根据它们的类名对 div 进行排序，并带有切换 show(); 的按钮；如果该类存在但 hide(); 如果该类不存在。我没有收到任何错误，但代码不想按照我认为我告诉它的方式工作？当您在我的预览中单击按钮时，它会隐藏具有类名的 id，而对没有类名的 id 则不执行任何操作。CSS<html><头部><title>排序</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><正文><div id="sort-box"><div id="button-wrap"><button id="everyone" class="sort-button active">所有人</button><button id="lions" class="sort-button">狮子</button><button id="tigers" class="sort-button">老虎</button><button id="bears" class="sort-button">熊</button><textarea id="search" class="sort-button" placeholder="search"></textarea></div><div class="sort-hold"> <div id="member" class="lions all">会员名 - 狮子</div> <div id="member" class="tigers all">会员名-老虎</div> <div id="member" class="bears all">会员名-熊</div></div></div> <script type="text/javascript" src="assets/js/main.js"></script></正文></html>JSvar btnWrap = document.getElementById("button-wrap");// 获取容器内所有 class="btn" 的按钮var btns = btnWrap.getElementsByClassName("排序按钮");// 循环遍历按钮并将活动类添加到当前/单击的按钮for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("点击", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace("active", ""); this.className += "活跃"; });}$("#everyone").click(sortEveryone);功能排序所有人（）{ console.log("按钮点击了！") $("#member").show(); }; $("#lions").click(sortOne);函数 sortOne() { console.log("按钮点击了！") if($("#member").hasClass(".lions")){ $("#member").show(); } 别的 { $("#member").hide(); } };
2 回答
开满天机
TA贡献1786条经验 获得超13个赞
您可以使用更通用的方法来执行此操作，对所有按钮使用一键式侦听器，并检查事件发生的那个的 id 并做出相应的反应
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>
慕勒3428872
TA贡献1848条经验 获得超6个赞
这是我的解决方案。
将每个人都添加到每个人 btn 并将 sort-hold成员替换为类名而不是id
<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button everyone 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 class="lions all member">member name - lion</div>
<div class="tigers all member">member name - tiger</div>
<div class="bears all member">member name - bear</div>
</div>
</div>
<script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery.js"></script>
<script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery_ui.js"></script>
将#member修复为.member
.member {
margin: 10px;
width: calc(100% - 70px);
height: 50px;
line-height: 50px;
padding: 0px 25px;
text-transform: uppercase;
font-family: arial;
background: #fff;
font-size: 10px;
outline: 1px solid #ddd;
outline-offset: -1px;
}
// Get the container element
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();
}
// add activeBtn function for all btns except .everyone
for (var btn of btns) {
$(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : "";
}
function activeBtn(e) {
let targetId = e.target.id;
let members = $(".member");
// if the member class has the same name as the btn id, show it else hide it
for (var member of members) {
$(member).hasClass(targetId) ? $(member).show() : $(member).hide();
}
}
我已将 #member 更改为 .member，拥有多个具有相同 ID 的元素并不是一个好方法。
我已经为每个人添加了.everyone以使其更易于处理。
添加回答
举报
0/150
提交
取消