亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

狐的傳說 2022-10-13 19:21:57
我正在嘗試編寫一個代碼，根據它們的類名對 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>


查看完整回答
反對 回復 2022-10-13
?
慕勒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以使其更易于處理。


查看完整回答
反對 回復 2022-10-13
  • 2 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號