Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Plynne Filtrowanie div'ów w JQuery
Maxie
post
Post #1





Grupa: Zarejestrowani
Postów: 82
Pomógł: 1
Dołączył: 19.10.2011

Ostrzeżenie: (0%)
-----


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!!
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Maxie
post
Post #2





Grupa: Zarejestrowani
Postów: 82
Pomógł: 1
Dołączył: 19.10.2011

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 10.10.2025 - 02:45