猿问

如果 id 有特定的类，使用 JS/jQuery Show() + Hide() 排序？

我正在尝试编写一个代码，根据它们的类名对 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>

JS


var 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();

    }

  };


狐的传说
浏览 109回答 2
2回答

开满天机

您可以使用更通用的方法来执行此操作，对所有按钮使用一键式侦听器，并检查事件发生的那个的 id 并做出相应的反应const $items = $('.sort-hold').children()$('.sort-button').click(function(){&nbsp; &nbsp;// remove active class from other buttons&nbsp; &nbsp;$('.sort-button.active').removeClass('active');&nbsp; &nbsp;// make this button active&nbsp; &nbsp;$(this).addClass('active');&nbsp; &nbsp;// hide/show logic&nbsp; &nbsp;if(this.id === 'everyone'){&nbsp; &nbsp; &nbsp; $items.show()&nbsp; &nbsp;}else{&nbsp; &nbsp; &nbsp; $items.hide().filter('.' + this.id).show();&nbsp; &nbsp;&nbsp; &nbsp;}})<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">&nbsp; &nbsp; <div&nbsp; class="lions all">member name - lion</div>&nbsp; &nbsp; <div&nbsp; class="tigers all">member name - tiger</div>&nbsp; &nbsp; <div&nbsp; class="bears all">member name - bear</div></div></div>
0

慕勒3428872

这是我的解决方案。将每个人都添加到每个人 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">&nbsp; &nbsp; <div class="lions all member">member name - lion</div>&nbsp; &nbsp; <div class="tigers all member">member name - tiger</div>&nbsp; &nbsp; <div class="bears all member">member name - bear</div></div></div>&nbsp; &nbsp; <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery.js"></script>&nbsp; &nbsp; <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery_ui.js"></script>将#member修复为.member.member {&nbsp; margin: 10px;&nbsp; width: calc(100% - 70px);&nbsp; height: 50px;&nbsp; line-height: 50px;&nbsp; padding: 0px 25px;&nbsp; text-transform: uppercase;&nbsp; font-family: arial;&nbsp; background: #fff;&nbsp; font-size: 10px;&nbsp; outline: 1px solid #ddd;&nbsp; outline-offset: -1px;}// Get the container elementvar btnWrap = document.getElementById("button-wrap");// Get all buttons with class="btn" inside the containervar btns = btnWrap.getElementsByClassName("sort-button");// Loop through the buttons and add the active class to the current/clicked buttonfor (var i = 0; i < btns.length; i++) {&nbsp; btns[i].addEventListener("click", function() {&nbsp; &nbsp; var current = document.getElementsByClassName("active");&nbsp; &nbsp; current[0].className = current[0].className.replace(" active", "");&nbsp; &nbsp; this.className += " active";&nbsp; });}$("#everyone").click(sortEveryone);function sortEveryone() {&nbsp;&nbsp; &nbsp; console.log("button clicked!")&nbsp; &nbsp; $(".member").show();}// add activeBtn function for all btns except .everyonefor (var btn of btns) {&nbsp; &nbsp; $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : "";}function activeBtn(e) {&nbsp; let targetId = e.target.id;&nbsp; let members = $(".member");&nbsp; // if the member class has the same name as the btn id, show it else hide it&nbsp; for (var member of members) {&nbsp; &nbsp; $(member).hasClass(targetId) ? $(member).show() : $(member).hide();&nbsp; }}我已将 #member 更改为 .member，拥有多个具有相同 ID 的元素并不是一个好方法。我已经为每个人添加了.everyone以使其更易于处理。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答