$(function() { //jquery ' de adsız fonksiyon sayfa açılınca çalışan fonksiyondur // özellik-filitreleme'ye ait kodlar // tekrarlanacak kayıtları kaldrımak var tsLen = $(".tkrrSil").length; //tekrarları silmek için tanımlanan classın uzunluğunu alıyoruz var tkrKntrl =["marj"]; //buttondaki verileri bu dizeye atıyoruz "marj" elamnınıda ilk döngünde şaşırmasın die ekledim for (var a = 0; a < tsLen ; a++) { //tslene göre for döngüsünü kuruyoruz var value = $(".tkrrSil").eq(a).html();//buttonun içindeki html değerini alıyoruz value = $.trim(value.toUpperCase()); // boşlukları silip bütün harfleri küçültüyoruz trim boşlukları siler toUpperCase ise harfleri küçültür for (var i = 0; i '+ val +' ' ); // ilk başta ldığımız button html ını(yani val değişkeni) ve silince tekrar işlem yapmak için clval değişkenini etikete yerleştiriyoruz filter(fltr); // kendi oluşturduğumuz bir fonksiyon birden fazla yerde kullanacağımız için fonksiyon olarak kullandık ve paremetre olarak da fltr dizisini gönderdik // filter fonksiyonu 286. satırda goToByScroll("scrollDiv"); //293.satırda }); //ÖZET: filtre butonlarına tıklanınca istenen emlakları göstermek için emlakları ayırmaya yarıyacak olan classları diziye atıp o diziyi döndürüp dizide bulunan bütün // emlakların gösterilmesine olanak sağlıyoruz yani birden fazla filitreleme yapabiliyoruz $(".btnSonİlk").click(function(){ //emlakların sıralamasını baştan sona sondan başa alan buttondur $('#emlaklar > .emlak-cards').each(function() { //emlak kardlarını kapsıyan div i ve hemen altındaki çevirilecek divlerin classını yazıyoruz $(this).prependTo(this.parentNode); }); //etiket işlemleri; var val = $(this).html(); var clval = "btnSonİlk"; $( "#f-etiket-siralama" ).html(' '+ val +' ' ); if (val != "İlk Eklenen"){ //else if gibi eğer son eklenen ise ilk eklenen butonuna çevir ilk eklenen ise son eklenene çevir $(this).html("İlk Eklenen"); return; } $(this).html("En Son Eklenen"); goToByScroll("scrollDiv"); });//ÖZET: kısacası en altaklerini en üste çıkarıyor. $(".btnEnAz").click(function(){ // gösterilecek en az fiyatını belirleyen button tıklandığında var val = $(this).attr("value"); // üzerinde bulunan value attribute un değerini al yani paranın value sini al if (fiyat[1] < val && val !== "0" ) { // kontrol; fiyat dizisinin ilk indexi(0) en az için ikinci indexi(1) en çok için kullanılıcak alert("En Az En Çok Dan Büyük Olamaz");// value si sıfır değilse demişiz sebebi aşağılara gidildikce anlaşılacak ama // spoiler vermek gerekirse btnEsil yani seçilmiş fiyat filtreleri kaldırılmak istenirse yani en az ve en çok belirlediniz // en çoku kaldırdığınızda jquery ile tekrar en az butonuna basıyoruz 160. satır ve 170. satırdaki gibi ve en cok sıfırlanıyor sıfır olunca koşula takılmaması // için öyle bişi yaptım return; } if (val !== "0"){ fiyat[0] = parseInt(val); //intgere çeviriyoruz çünkü htmldeki attributte string olarak değerler kaydedilmiş var clval = "enaz"; //clvalı en az olarak atıyıp etiketimizi html ile basıyoruz $( "#fiyat-enaz" ).html(' '+ val +' ' ); } // yukarılarda gördğümüz append ile html in farkı html komple herşeyi siler ve belirlediğmiz tagları oraya ekler // append ise orda bulunan html kodunu silmez belirlediğimiz html kodunu oraya ekler for (var i = 0; i < $(".emlak-cards").length ; i++) { var Cardfiyat = $(".emlak-cards").eq(i).attr("fiyat");//fiyatımızı değişkene alıyoruz Cardfiyat = parseInt(Cardfiyat); //integere çeviriyoruz if (Cardfiyat >= fiyat[0] ){ //fiyat[0] en az fiyattan büyük eşittir ise if ($(".emlak-cards").eq(i).hasClass("gstrl") == true){//eğer gstrl klası var ise $(".emlak-cards").eq(i).show();//göster }//bunun manası kiralık, eklenme zamanı, adres kriterlerinde seçtiğimiz kriterler var ise onlar arasında bi filtreleme yap } if (Cardfiyat <= fiyat[1] ){ if ($(".emlak-cards").eq(i).hasClass("gstrl")){ //en cok fiyata görede ondan küçükleri göster $(".emlak-cards").eq(i).show(); } } if (Cardfiyat < fiyat[0] ){ //en az fiyatın aşağısında ne varsa gösterme $(".emlak-cards").eq(i).hide(); } if (Cardfiyat > fiyat[1] ){//en çok fiyatın üstünde ne varsa gösterme $(".emlak-cards").eq(i).hide(); } } });//ÖZET: en az fiyata göre ve zaten filitrelemiş cardları tekrar filtrelio vede en çok seçilmiş ise onuda unutmuyor. $(".btnEnCok").click(function(){ var val = $(this).attr("value"); if (fiyat[0] > val && val !== "0" ) { alert("En Çok En Az Dan Küçük Olamaz"); return; } if (val !== "0"){ fiyat[1] = parseInt(val); var clval = "encok"; $( "#fiyat-encok" ).html(' '+ val +' ' ); }// buraya kadar en az ile aynı. aslında iki buttonu birleştirmek lazım fakat sanki böyle daha sağlıklı for (var i = 0; i < $(".emlak-cards").length ; i++) { var Cardfiyat = $(".emlak-cards").eq(i).attr("fiyat"); Cardfiyat = parseInt(Cardfiyat) if (Cardfiyat >= fiyat[0] ){ // enaz fiyattan büyük eşitse if ($(".emlak-cards").eq(i).hasClass("gstrl")){//gstrl de varsa $(".emlak-cards").eq(i).show();// onu bize göster } } if (Cardfiyat <= fiyat[1] ){// hatırlat bi ara *orno sitesi yazalım if ($(".emlak-cards").eq(i).hasClass("gstrl")){ // encok fiyattan küçük eşitse $(".emlak-cards").eq(i).show();// göster } } if (Cardfiyat < fiyat[0] ){//en az fiyatın aşağısında ne varsa gösterme $(".emlak-cards").eq(i).hide(); } if (Cardfiyat > fiyat[1] ){//en çok fiyatın üstünde ne varsa gösterme $(".emlak-cards").eq(i).hide(); } } goToByScroll("scrollDiv"); // bunuda en aza koymadım çünkü adam ilk en azı seçip hadi en çokuda seçeyim derse die });//ÖZET: en çok fiyata göre ve zaten filitrelemiş cardları tekrar filtrelio vede en az seçilmiş ise onuda unutmuyor $("#btnTmz").click(function(){// en sağdaki temizle butonudur bütün seçimleri iptal eder $(".emlak-cards").show(); // herşeyi göster $( "#fiyat-enaz" ).html(' ');//fiyat enaz etiktinin bulunduğu html i boşalt $( "#fiyat-encok" ).html(' ' );//fiyat encok etiktinin bulunduğu html i boşalt $( "#f-etiket-siralama" ).html(' ');//sıralama etiktinin bulunduğu html i boşalt $( "#f-etiket" ).html(' ' );// diğer etiketlerin bulunduğu htmli boşalt fltr.splice(0, fltr.length);// fltr dizisindeki elamanları uçurmaya indexinden başla taki fltr ın uzunluğuna kadar fiyat.splice(0, fiyat.length);//fiyat dizisindeki elamanları uçurmaya indexinden başla taki fltr ın uzunluğuna kadar }); $(document).on("click",".btnEsil",function(){ // button etiket sil filtre seçimlerini kaldırmaya yarıyor var clval = $(this).attr("clval"); //clval atributun değerini tut. clval attribute unu sadece filtre buttonlarına koymadık etiketlerede koyduk $(this).closest('span').remove(); // this: yanı son olayı tetiklenen(burda son tıklanılan button). etiketi sil // en cok etiketini sildiğinde bu blok çalışır if (clval =="encok"){ // eğer etiketteki clval değeri encok ise if (fiyat.length < 2){ // eğer sadece enaz fiyat belirlenmişse kontrol amaçlı bir if gereksiz de sayılır fiyat.splice(0, fiyat.length); //fiyat dizisini kaldır filter(fltr);//filter fonksiyonunu tekrar başlat return;//kod işlemeyi birak } fiyat.splice(1, 1);//fiyat dizesinde ikinci yani encok içn kullanılan bölümü sil $(".btnEnAz").eq(0).trigger("click");// ve tekrar en az fiyata göre cardları göstermek için btnenaz 'a tıkla return;//kod işlemeyi birak }// en az etiketini sildiğinde bu blok çalışır if (clval =="enaz"){ if (fiyat.length < 2){ fiyat.splice(0, fiyat.length); filter(fltr); return; } fiyat.splice(0, 1); $(".btnEnCok").eq(0).trigger("click"); return; }//en cok ile aynısı // en son eklenan veya ilk eklenen etiketini sildiğinde bu blok çalışır if (clval == "btnSonİlk"){ $(".btnSonİlk").trigger("click");//tekrar tersine çevirmek için btnSonİlke tıkla return; }// en sonda sadece 1 etiket kalmışsa bu blok çalışır if (fltr.length < 2){ // eğer fltr dizesinde 2den küçük elaman var ise yani 1 class var ise $(".emlak-cards").show(); //herşeyi göster if (fiyat.length > 1){ //fiyat dizisi dolu ise $(".btnEnAz").eq(0).trigger("click"); //tekrar şekillendirmek için enaz $(".btnEnCok").eq(0).trigger("click");//ve encok tuşlarına tıkla } fltr.splice(0, 1);//zaten 1 eleman vardı onuda silip boşaltalım dizeyi return; } // burası ise yani sadece 1 etiketi silmek istediğinizde bu blog çalışır for (var j = 0; j < fltr.length ; j++) { // for döngüsünü kurup if (fltr[j] == clval){ //fltr içindeki ve silmek istediğiniz etiketi eşleştirp fltr.splice(j, 1);// onun indexinde bulunan elamanı siliyoruz } } filter(fltr);//ve tekrardan kartları filitreliyoruz });//ÖZET: filitrelediğmiz seçenekleri kaldırdığımızda gerçekleşen olaylar burası önemli üste yazılanları okusan çok iyi olur $("#txtAra").keyup(function() {// tuşa basılıp parmak kaldırıldığı anda gerçekleşen olay var deger = $(this).val().toLowerCase(); //degerin bütün harflerini küçült $(".emlak-cards").filter(function() { //emlak-cards yazan yere hangi divi koyarsan koy içindekileri gelen değere göre toggle gösterir veya saklar $(this).toggle($(this).text().toLowerCase().indexOf(deger) > -1); }); }); //iletisim-ajax $(document).on("click",".btnİlGon",function(){ // veri alaçağımız inputların claslarına isim verdikten sonra class olarak seçtik başka yerlerde de kullanalım die var ad = $('.txtİlAd').val();//değerleri alıyoruz .val() ile input için val kullanılır bide herhangi bir div in içinde bulunan var mail = $('.txtİlMail').val();//html taglarını siler öyle değerini alır var mesaj = $('.txtİleti').val(); if (ad == "" || mail == "" || mesaj == "" )//boşsa geri dön return; $.ajax({ // ajax post işlemi burda başlıyor type: "POST", // type post olarak belirliyoruz url: "iletipost.ajax.php",//nereye post edilecek data: {name:ad, email:mail, message:mesaj}, //neler post edilecek // bide dataType die bi özeliğimizde var fakat biz sadece standart değişken post edicez ondan yazmıyoruz dataType success: function(x){//eğer ajax post işlemi başarıya ulaşırsa neler yapılsın //x iletipost.ajax.php den gelecek if (x == "yes"){ //yes gelirse $("#iletisonuc").fadeIn(200).addClass("alert-success").html(""); //200 salisde alert-success clasını ata ve içini boşalt $("#iletisonuc").html('Başarılı! Mesajın başarıyla gönderildi.');//içine mesajımızı yaz }//fadein animasyondur 200 değerini 5000 yaparsan anlarsın ne işe yaradığını if (x == "no"){// no gelirse $("#iletisonuc").fadeIn(200).addClass("alert-danger").html("");//hata mesajını verecek $("#iletisonuc").html('Hata! Mesajınız iletilemedi!'); } } }); }); // yorumlar-ajax $(document).on("click","#btnYorGonder",function(){ // yorum gönder butonuna tıklandığında var yorum = $('#txtYorum').val(); //yorumu al var eid = $(this).attr("data-eid");//butonun üstündeki data-eid attributundan emlak id sini al var kid = $(this).attr("data-kid");//butonun üstündeki data-kid attributundan kullanici id sini al if (yorum == "" ){ //yorum boş ise uyarı ver $("#yorumSonuc").html("Yorum Giriniz"); $("#yorumSonuc").removeClass();// bütün class ları sil $("#yorumSonuc").addClass("alert alert-danger"); //bu classı ekle return; } $.ajax({ type: "POST", // ajax type post olarak belirliyoruz url: "yorumpost.ajax.php", //nereye post edilecek onu yazıyoruz data: {yorum:yorum, emlakid:eid, uyeid: kid}, //post edilecek datalar success: function(x){//x i yorumpost.ajax.php den alıcaz if (x == "yes"){ //yes gelirse $("#yorumSonuc").html("Yorum Eklendi"); //htmline bunu ekle $("#yorumSonuc").removeClass();//bütün classları sil eğer .removeClass("herhangibirclass") yazarsan sadece o class silinir $("#yorumSonuc").addClass("alert alert-success");//bu classı ekle "alert alert-success" bootstrapta kayıtlıdır $('#txtYorum').val("");//yorum inputunu boşalt $.yorumGetir(eid);//yorumları günceleyecek fonksiyondur 276.satırda } if (x == "no"){// no gelirse uyarı mesajını ver $("#yorumSonuc").html("Yorum Eklenemedi"); $("#yorumSonuc").removeClass(); $("#yorumSonuc").addClass("alert alert-danger"); } } }); }); $(document).on('click', '.btnYorumSil', function(){//yorum sil buttonuna tıklandığında var yId=$(this).attr("data-id");// buttonun üzerinde bulunan yorum id sini al var eid = $("#btnYorGonder").attr("data-eid");//btnyorumgönder in üzerinde bulunan emlak idsini al $.yorumSil(yId,eid); //yorum sil fonksiyonun parametrelerine gönder }); $.yorumSil=function(yId,eid){// id parametreli "$.degisken" jquerydeki değişken belirlemedir yani var degisken yerine $. koyuyoruz $.ajax({//ve isimsiz bir fonksiyonu $.yorumSil değişkenine aktarıyoruz //ajax metodumuzu kuruyoruz url: 'yorumsil.ajax.php',//post edilecek url i belirle data: {yorumId:yId},//post edilecek datayı belirle //parametre olarak gelen yorum idsini gönderiyoruz type: 'POST',//type post olarak belirle success: function () { $("#yorumSonuc").html("Yorum Silindi"); $("#yorumSonuc").removeClass(); $("#yorumSonuc").addClass("alert alert-success"); $.yorumGetir(eid); //parametrede girilen emlak id sini yorum getir fonksiyonuyla kullan } }); } $.yorumGetir=function(id){// id parametreli "$.degisken" jquerydeki değişken belirlemedir yani var degisken yerine $. koyuyoruz $.ajax({//ve isimsiz bir fonksiyonu $.yorumGetir değişkenine aktarıyoruz //ajax metodumuzu kuruyoruz url: 'yorumlar.php',//url i belirliyoruz (bu özellik belirlemelerin sırası önemli değildir istersen önce type ıda belirleyebilirsin ) succes en aşağıda olsun yeter data: {emlakid:id},//post edilecek data yı belirliyoruz type: 'POST',// type belirliyoruz dataType: 'html',//dataType busefer belirliyip html secioruz normalde sadece object(standart değişken (nesne)) kullandığımız için belirlemeye gerek yoktu success: function (data) {//başarıyla post edilince yorumlarda bulunan datayı alıp $("#yorumlar").html(data);//yorumlar divinin içine aktarıyor yorumcevir();//yorumlar ilkten sona göre veritabanından geliodu yaptığımız yorumu direk göremiyoduk ondan cevirelm dedik } }); } function yorumcevir() { $('#yorum-cont > .comments').each(function() { //kapsıyan bir div ve içinde bulunan divleri tersine sıralamak istediğiniz classını yazıyoruz $(this).prependTo(this.parentNode);// bunları açıklamaya gerek yok internetten buldum zaten bende }); } function goToByScroll(id) { // internetten bulduğum bir fonksiyondur paremetre ile gönderilen dive doğru scroll yapar görsel amaçlı filtre yaptıktan sonra kardların olduğu yere atması için kullandım $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow'); } function filter(dizi) { // dizi paremetreli filter fonksiyonu $(".emlak-cards").hide(); // bütün emlakları sakla if (dizi.length < 1){ // parametrede gelen dizinin uzunluğu birden küçükse $(".emlak-cards").show(); //bütün emlakları göster yani, dizi boşsa emlak kardlarını göster return;//ve kod okumayı bırak } for (var i = 0; i < dizi.length ; i++) { //dizinin uzunluğuna göre for döngüsü $('.'+dizi[i]).show(); // dizinin içindeki class değerlerinde olan emlakları tek tek gösteriyor $('.'+dizi[i]).addClass("gstrl");// gösterilyor manasında gstrl classını ekle } } //pagenatıon sayfalama $(function() { //jquery ' de adsız fonksiyon sayfa açılınca çalışan fonksiyondur $(".emlak-cards").hide(); $(".pag-0").show(); for (var i = 1; i <= $(".emlak-cards").length/6; i++) { //uzunluk sıfırdan başlamaz $("#pagButtons").append('
  • '); } }); $(document).on('click', '.btnPag', function(){ var index = $(this).index(); $(".emlak-cards").hide() $(".pag-"+index).show(); });