Selamlar, kart şablonum var column koduyla yaptım fakat her yenilemede kartların yerinin yani sıralamasının değişmesini istiyorum bunu ne ile yapabilirim?
Örnek olarak:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_column_cards
buradaki card1,card2,card3,card4 gibi sıranın her sayfa yenilenmesinde bu kartların sırasının değişmesini istiyorum. Yardımcı olursanız sevinirim.
Sıralamayı Karışık Göstermeyi Nasıl Yaparım? |
10 Mesajlar | 1.182 Okunma | ||
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 261
- Beğeniler 110 / 53
- Ticaret 2, (%100)
- Üyelik 11.09.2013
- Yaş/Cinsiyet 30 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad A** K**
- Mesajlar 1077
- Beğeniler 361 / 361
- Ticaret 33, (%100)
Aşağıdaki kod ile kolay bir şekilde yapabilirsiniz hocam.
$(".row").html($(".row .column").sort(function(){
return Math.random()-0.5;
}));
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 261
- Beğeniler 110 / 53
- Ticaret 2, (%100)
Hocam cevabınız için teşekkürler fakat verdiğiniz kodu ekledim de çalışmadı. Ekstra bir ayar mı yapmak gerekiyor?
- Üyelik 11.09.2013
- Yaş/Cinsiyet 30 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad A** K**
- Mesajlar 1077
- Beğeniler 361 / 361
- Ticaret 33, (%100)
Jquery ekli mi ? 1.9 sürüm üstü denedim ben :)
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 261
- Beğeniler 110 / 53
- Ticaret 2, (%100)
Yok hocam jquery ekli değil yaptığım kodda.
- Üyelik 11.09.2013
- Yaş/Cinsiyet 30 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad A** K**
- Mesajlar 1077
- Beğeniler 361 / 361
- Ticaret 33, (%100)
Benim verdiğim kod jquery kütüphanesini kullanıyor hocam 1.9 üzeri sürüm import etmeniz gerekiyor çalışması için :)
<script></script>
- Üyelik 24.02.2018
- Yaş/Cinsiyet 42 / E
- Meslek Webmaster
- Konum Diğer
- Ad Soyad R** C**
- Mesajlar 261
- Beğeniler 110 / 53
- Ticaret 2, (%100)
Tamamdır hocam, çok teşekkürler yardımınız için :)
- Üyelik 11.09.2013
- Yaş/Cinsiyet 30 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad A** K**
- Mesajlar 1077
- Beğeniler 361 / 361
- Ticaret 33, (%100)
Rica ederim iyi çalışmalar :)
- Üyelik 11.09.2013
- Yaş/Cinsiyet 30 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad A** K**
- Mesajlar 1077
- Beğeniler 361 / 361
- Ticaret 33, (%100)
Bu arada yazdığım kod bloğundaki mantığı da açıklamak istiyorum soru işareti kalmaması adına. Math.Random kütüphanesi 0(dahil) ile 1(hariç) arasında bir değer döndürüyor. Burada math.random() - 0.5 diyerek -0.5 ile + 0.5 arasında bir değer döndürerek sort fonksiyonunun rastgele çalışmasını sağlıyoruz.
Aslında burada - değerler decrease(azalan) sıra, + değerler increase(artan) sırayı teslim ediyor. 0 değeri ise gelen order'da göstermeye yarıyor.Bunun için de sort methodunun daha kompleks bir kullanım şekliyle kullanmış oluyoruz. (Daha fazla bilgi için link)
Özetlemek gerekirse;
Bu sayede değerlerimiz her seferinde farklı bir sırayla görüntülenmiş oluyorlar.
Aslında burada - değerler decrease(azalan) sıra, + değerler increase(artan) sırayı teslim ediyor. 0 değeri ise gelen order'da göstermeye yarıyor.Bunun için de sort methodunun daha kompleks bir kullanım şekliyle kullanmış oluyoruz. (Daha fazla bilgi için link)
Özetlemek gerekirse;
[*]Math.Random()-0.5 değerinden dönen değer 0 ile -0.5 arasındaysa azalan sırayla sort ediyoruz.
[*]Math.Random()-0.5 değerinden dönen değer 0 ile +0.5 arasındaysa artan sırayla sort ediyoruz.
[*]Math.Random()-0.5 değerinden dönen değer 0 ise sıralama yapmıyoruz.
Bu sayede değerlerimiz her seferinde farklı bir sırayla görüntülenmiş oluyorlar.
- Üyelik 06.04.2016
- Yaş/Cinsiyet 39 / E
- Meslek Bilgisayar Mühendisi
- Konum İstanbul Anadolu
- Ad Soyad M** Ç**
- Mesajlar 42
- Beğeniler 1 / 11
- Ticaret 0, (%0)
Saf javascript biraz daha karışık ama extra kütüphaneye gerek kalmaz.
document.getElementsByClassName("row")[0].innerHTML=Array.prototype.slice.call( document.querySelectorAll(".row .column"),0).sort(function(a, b){ return Math.random()-0.5; }).reduce(function(sum, item){return (sum.outerHTML? sum.outerHTML :sum) + item.outerHTML;});
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)