[JavaScript] Plynne Filtrowanie div'ów w JQuery Opcje

[Maxie]

Witam. Potrzebuję zrobić coś w stylu wyszukiwarki. Ma to być raczej filtrowanie już istniejących divów, dzięki czemu zaoszczędzę ludziom na przechodzeniu przez strony. Mam następujące inputy typów:

-name
-selected x2
-number x2
-checkbox x25

Zacząłem od sprawdzania checkboxów. Myślałem, że sobie poradzę, ale to przekroczyło moje możliwości :< .
Tutaj macie moje "testy":

Kod

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><div>
<form>Wyszukiwarka: <br><input class="find" type="text"><br>
  1<input class="find" id="one" type="checkbox" checked="checked">
<br>
  2<input class="find" id="two" type="checkbox" checked="checked">
</form>
  <div name="Osiem" class="one    "> "Osiem" 1  </div>
  <div name="Troll" class="two    "> "Troll" 2  </div>
  <div name="kabum" class="one two"> "kabum" 1 2</div>
  <div name="     " class="one two"> "     " 1 2</div>
</div>

Kod

$('.find').change(function() {
  
  if ( $("#one").is(':checked') ) {
    $('.one').show();
  }else{
    $('.one').hide();
  }
  
  if ( $("#two").is(':checked') ) {
    $('.two').show();
  }else{
    $('.two').hide();
  }
  
});

Więc rezultat był dobry, gdy checkbox był jeden. Przy drugim zaczęły się koligować. I jedno zaprzeczało drugiemu. W ogóle nie współgrały, gdy np. 1 był zaznaczony a 2 odznaczony to 1 & 2 było ukryte. Pomóżcie mi zrobić coś by sam sprawdzał checkboxy. i te warunki z name by był podobny chociaż. Dwa numbery mają określać minimum i maximum. A selecty to samo co checkboxy. Pomóżcie!!

[sunpietro]

nadaj divom klasy i sprawdzaj czy dana klasa istnieje. W ten sposób uzyskasz pożądany efekt.

[Maxie]

Przecież każdy div ma takie klasy, pod jakimi checkboxami ma się pokazywać. Np. "one two". Czyli klasa "one" i "two". Ale działa pod to co później odczytał JS. Czyli jeżeli div ma dwie klasy "one two" to ta w JS ostatnia czyli "two" zostaje przypisana do tego diva i nie reaguje on na na "one" :<. Udało mi się coś zrobić z kodem by nie musieć pisać do każdego checkbox'a:

Kod

$('.find').change(function() {
  
  $(".find").each(function() {
    
    var id = $(this).attr('id');
  
    if ( $(this).is(':checked') ) {
      
      $("." + id).show();
      
    }else{
      
      $("." + id).hide();
      
    }
  
  });
  
});

Ale znowu to samo, po zaznaczeniu 1 nie reaguje div "one two" tylko 2 :<

Podgląd działania, każda linia do DIV a treść to klasy jakimi jest obdarzony tylko w języku angielskim.

Podbijam i proszę o pomoc. Rzecz jasna nie siedzę z założonymi rękoma i nie czekam na odpowiedź z kodem do skopiowania. Oto wynik moich starań. Według mnie wszystkie warunki są prawidłowe. Lecz nie działa jak powinien. Link do działa ten sam co powyżej. A oto kod źródłowy:

Kod

$('.find').change(function() {
  
  var input;
  
  $(".find[type=checkbox]").each(function() {
    
    var id = $(this).attr('id');
  
    if ( $(this).is(':checked') ) {
      
      $("." + id).show();
      
      
      
      if( $("." + id).hasClass( input = $(".find[type=checkbox]").each() ) ){
        
        if(input != id && $("#" + input).is(':checked') ){
          
          $("." + input).show();
          
        }
        
        if(input != id && $("#" + input).isnt(':checked') ){
          
          $("." + input).hide();
          
        }
        
      }
      
    }else{
      
      $("." + id).hide();
      
      if( $("." + id).hasClass( input = $(".find[type=checkbox]").each() ) ){
        
        if(input != id && $("#" + input).is(':checked') ){
          
          $("." + input).show();
          
        }
        
        if(input != id && $("#" + input).isnt(':checked') ){
          
          $("." + input).hide();
          
        }
        
      }
      
      
    }
  
  });
  
});

[b4rt3kk]

Dzieję się tak, ponieważ kolejność wykonywania pętli each jest taka, a nie inna, najpierw sprawdza wszystkie 1, potem 2, itd. Musisz więc odwrócić kolejność wykonywania działań.

Dodaj divom, które chcesz sprawdzać jakąś klasę, np. checkMe. A następnie:

[HTML] pobierz, plaintext 
 
$('.checkMe').each(function() {
 
  div = $(this);
 
  $('.find').each(function() {
 
    if ($(this).is(':checked')) {
      if (div.hasClass($(this).attr('id'))) {
        // jeśli div ma klasę o id zaznaczonego checkboxa to zostaje
        div.show();
      } else {
        // w przeciwnym razie wyrzucamy
        div.hide();
      }
    }
 
  });
 
});
 
[HTML] pobierz, plaintext 

[Maxie]

Efekt nadal jest nie zadowalający. Poprawnie filtruje natomiast jak zaznaczam tylko jeden checkbox. Np. gdy zaznaczam tylko 1 pokazują się "one", "one two" itp, ale gdy włączę np. 2 lub 3 nic się nie zmienia.
http://jsbin.com/welcome/73833/watch

Wykombinowałem jak mogę przekazywać ilość zaznaczonych checkbox'ów o ID takich jak nazwy klas. Lecz coś tam nadal nie gra. Pętla sprawdza tylko pierwszego div'a nie wiem czemu. Patent wykombinowany, gorzej z poprawnością kodu. Proszę pomóżcie mi odnaleźć błędy!

Kod

$('.checkme').each(function() {
    
    $(this).attr('value', '0');
    
  });

$('.find').change(function() {
  
$('div.checkme').each(function() {

  div = $(this);
  value = $(this).attr('value');
  
    $('.find[type="checkbox"]').each(function() {
    check = $(this);
    
    if( div.hasclass( check.attr('id') )){
      
      if( check.attr('checked', 'checked')){
    
        value = value + 1;
        
      }
    }
  

  });
  
  div.attr('value', value);
  
  if( div.attr('value', '0') ){
    
      div.hide();
      
    }else{
    
      div.show();
      
   }
    
});

});

Ten post edytował Maxie 16.01.2013, 16:32:08

[amii]

hasclass zmień na hasClass
JS odróznia wielkość liter

[Maxie]

Sukces! Dzięki wielkie amii. Przez ten kluczowy błąd pętla przestawała działać, ponieważ nie wiedziała co robić. A oto działający kod dla szukających odpowiedzi:

JQuery:

Kod

$('.find').change(function() {

  $('.checkme').each(function() {
    
    $(this).attr('value', 0);
    
  });
  
  
$('div.checkme').each(function() {

  div = $(this);
  value = $(this).attr('value');

  $('.find[type="checkbox"]').each(function() {
    check = $(this);
      
    if( div.hasClass( check.attr('id') )){

      if( check.is(':checked')){
        
        value = value + 1;
        
      }
    }
  

  });
  
  $(this).attr('value', value);
  
  if( $(this).attr('value') === 0 ){
    
      div.hide();
      
    }else{
    
      div.show();
      
   }
    
});

});

HTML:

Kod

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><div>
<form>
  Wyszukiwarka: <br><input class="find" type="text"><br>
  1<input class="find" id="one" type="checkbox" checked="checked">
<br>
  2<input class="find" id="two" type="checkbox" checked="checked">
  <br>
  3<input class="find" id="three" type="checkbox" checked="checked">
</form>
  <div name="Osiem" class="checkme one    ">1</div>
  <div name="Troll" class="checkme two    ">2</div>
  <div name="kabum" class="checkme two one">1 2</div>
  <div name="     " class="checkme three one">3 1</div>
  <div name="     " class="checkme three">3</div>
  <div name="     " class="checkme three two one">3 2 1</div>
</div>