Ordenando con JS / jQuery Show () + Hide () si id tiene una clase específica?

0

Estoy tratando de hacer un código que clasifique los divs según sus nombres de clase, con botones que alternan show (); si la clase existe pero hide (); si la clase no existe. No recibo ningún error, pero el código no quiere funcionar como creo que lo dije. Cuando haces clic en el botón en mi vista previa, oculta la identificación que tiene el nombre de la clase y no hace nada a las que no lo tienen.

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

4
  • jsfiddle.net/cuddlypunks/o82xd9v7/1 aquí está el JSFiddle donde puede ver lo que está haciendo actualmente. Emilie Hepburn 23/06/20 a las 1:41
  • El propósito del botón es mostrar u ocultar el div con el mismo nombre que el botón y luego ordenarlos, ¿verdad? Budi Salah 23 jun 2020 a las 2:00
  • Sí, quiero que el botón muestre los divs con el mismo nombre y oculte los que no lo tienen. Emilie Hepburn 23 de junio de 2020 a las 2:13
  • 1
    Tenga en cuenta que los ID deben ser únicos en una página por definicióncharlietfl 23/06/20 a las 2:44
0

Puede hacer esto con un enfoque más genérico usando un oyente de un clic para todos los botones y verificando la identificación de la que ocurrió el evento y reaccionando en consecuencia

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>
0

Aquí está mi solución.

Agregue la clase todos a todos btn y reemplace el miembro de clasificación y retención por el nombre de la clase en lugar de la identificación

<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>

Arreglar #member para que sea .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();
  }
}

He cambiado el #member a .member , no es un buen enfoque tener más de un elemento con la misma identificación.

Y he añadido .todos para todos btn para que sea más fácil de manejar.