Javascript Div Bloğu Hide/Show

12/Eyl/16 12:28

Kısayol

Şikayet

Özel Mesaj

Daft Ground
PLaXToR

Kayıt Tarihi: 08/Temmuz/2003

Selamlar, A - Z arası kullanıcıların tıkladığında sadece o harf ile başlayan itemleri göstermesini istediğim aşağıdaki unordered list im var örnek:

				<ul id="letter">
			        <li><a href="index.php?route=product/categories">TÜMÜ</a></li>
			        <!--<li><a href="javascript:void(0);" class="filterx">0-9</a></li>-->
			        <li><a href="javascript:void(0);" class="filterx">A</a></li>
			        <li><a href="javascript:void(0);" class="filterx">B</a></li>
			        <li><a href="javascript:void(0);" class="filterx">C</a></li>
			        <li><a href="javascript:void(0);" class="filterx">D</a></li>
			        <li><a href="javascript:void(0);" class="filterx">E</a></li>
			        <li><a href="javascript:void(0);" class="filterx">F</a></li>
			        <li><a href="javascript:void(0);" class="filterx">G</a></li>
			        <li><a href="javascript:void(0);" class="filterx">H</a></li>
			        <li><a href="javascript:void(0);" class="filterx">I</a></li>
			        <li><a href="javascript:void(0);" class="filterx">İ</a></li>
			        <li><a href="javascript:void(0);" class="filterx">J</a></li>
			        <li><a href="javascript:void(0);" class="filterx">K</a></li>
			        <li><a href="javascript:void(0);" class="filterx">L</a></li>
			        <li><a href="javascript:void(0);" class="filterx">M</a></li>
			        <li><a href="javascript:void(0);" class="filterx">N</a></li>
			        <li><a href="javascript:void(0);" class="filterx">O</a></li>
			        <li><a href="javascript:void(0);" class="filterx">P</a></li>
			        <li><a href="javascript:void(0);" class="filterx">Q</a></li>
			        <li><a href="javascript:void(0);" class="filterx">R</a></li>
			        <li><a href="javascript:void(0);" class="filterx">S</a></li>
			        <li><a href="javascript:void(0);" class="filterx">T</a></li>
			        <li><a href="javascript:void(0);" class="filterx">U</a></li>
			        <li><a href="javascript:void(0);" class="filterx">V</a></li>
			        <li><a href="javascript:void(0);" class="filterx">W</a></li>
			        <li><a href="javascript:void(0);" class="filterx">X</a></li>
			        <li><a href="javascript:void(0);" class="filterx">Y</a></li>
			        <li><a href="javascript:void(0);" class="filterx">Z</a></li>
			    </ul>

Birde tıklandığında gerekli filtrelerin yapılması için aşağıdıdaki gibi bir javascripti yazdım:

<script type="text/javascript">
				$(document).ready(function() {		
					function filterResults(letter){
						$(".alphabets div").hide();
						$(".alphabets div").filter(function() {
								//product-name
								return $(".name", this).text().charAt(0).toUpperCase() === letter;
							}).fadeIn(300);

						$(".alphabets div").hide();
						$(".alphabets div").filter(function() {
								//product-name
								return $(".name", this).text().charAt(0).toUpperCase() === letter;
							}).fadeIn(300);
					};
					
					$("#letter li a.filterx").on("click",function(){
							var letter = $(this).text();            
							filterResults(letter);        
						});
					});
			</script>

Sorun şu:

<div class="alphabets" id="A">
ASD
</div>

Bu şekilde A yı filtreleyebiliyorum.

Ama eğer bu şekilde

<div class="alphabets" id="A">
<div>1. div</div><div>2. div</div>....
</div>

ASD yerinde iç içe geçmiş başka divler varsa onlar kalıyor. Neden olabilir? Onları da mı tek tek hide yapmak lazım. Tüm bloğu filtrelemesi gerekmez mi?

PLaXToR tarafından 12/Eyl/16 12:31 tarihinde düzenlenmiştir

If there are two or more ways to do something, and one of those ways can result in a catastrophe, then someone will do it.

Alıntı yap

12/Eyl/16 21:01

Kısayol

Şikayet

Özel Mesaj

Bektas
x-files

Kayıt Tarihi: 06/Eylül/2005

http://zulfumehmet.com/post/sayfanin-sagina-ve-soluna-kayan-div-ekleme bak belki bir yararı olabilir.

//Hayat Bazen Tatlıdır//--//Aşıksan vur saza şoförsen bas gaza// https://zulfumehmet.com/ Kişisel bir olay

Alıntı yap

12/Eyl/16 21:14

Kısayol

Şikayet

Özel Mesaj

kofcu

Kayıt Tarihi: 29/Ağustos/2014

hocam A divini normal displayi none olsun butona tıklayınca block olsun, ikinci tıkta none olsun?

            durum = document.getElementById(id).style.display;
            if (durum === "block") {
                document.getElementById(id).style.display = 'none';
                continue;
            }
            if (durum === "none") {
                document.getElementById(id).style.display = 'block';
                continue;
            }

buna benzer bir fonksiyn kullanıyorum ben...

ek: dediğin gibi içiçe div vesaire hiç sorun olmaması lazım aslında...

kofcu tarafından 12/Eyl/16 21:20 tarihinde düzenlenmiştir

ben de sevgiden yanayım...

Alıntı yap

13/Eyl/16 13:16

Kısayol

Şikayet

Özel Mesaj

Daft Ground
PLaXToR

Kayıt Tarihi: 08/Temmuz/2003

Bazı denemeler sonrası olayı çözdüm... Çözüm şu şekilde olacak belki işinize yarar.

<script type="text/javascript">
                $(document).ready(function() {     
                    function filterResults(letter){
                        $(".alphabets").hide();
                        $(".alphabets").filter(function() {
                                //product-name
                                return $(".name", this).text().charAt(0).toUpperCase() === letter;
                            }).fadeIn(300);
 
                    };
                     
                    $("#letter li a.filterx").on("click",function(){
                            var letter = $(this).text();           
                            filterResults(letter);       
                        });
                    });
            </script>

If there are two or more ways to do something, and one of those ways can result in a catastrophe, then someone will do it.

Alıntı yap