• 27-02-2021, 23:25:49
    #1
    aşağıdaki gibi 4 adet divimiz olsun. classları da box.

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    tıklanınca sonuç:
    <div class="box tiklandi"></div>

    istiyorum ki hangisine tıklarsam classname "box tiklandi" olarak değişsin. başka bir kutuya tıkladığımızda ise en son tıklanan "box tiklandi" olsun önceki normale dönsün. Yapılabilir mi?
  • 27-02-2021, 23:26:48
    #2
    <script>
    $(document).on('click','.box',function(){
    $(this).toggleClass('tiklandi');
    });
    </script>

    * jquery gerektirir.
    • emreozden
    • mertzafer
    • buddy
    emreozden, mertzafer ve buddy bunu beğendi.
    3 kişi bunu beğendi.
  • 27-02-2021, 23:28:41
    #3
    jquery kullanıyorsanız yapılabilir
    $('.box').on('click',function(){
    var item = $(this);
    /* tüm boxlardan tiklandiyi kaldır */
    $('.box').removeClass('tiklanti');
    /* o an tıklanılan box a tiklandi ekle */
    item.addClass('tiklandi');
    });
  • 27-02-2021, 23:34:51
    #4
    Misafir adlı üyeden alıntı: mesajı görüntüle
    <script>
    $(document).on('click','.box',function(){
    $(this).toggleClass('tiklandi');
    });
    </script>

    * jquery gerektirir.
    çok teşekkür ederim.
  • 27-02-2021, 23:35:59
    #5
    buddy adlı üyeden alıntı: mesajı görüntüle
    çok teşekkür ederim.
    hepsindeki class ı kaldırmak için @ebasit; in yazdığı gibi $('.box').removeClass('tiklandi'); da yazabilirsiniz ben unutmuşum.
    • ebasit
    ebasit bunu beğendi.
    1 kişi bunu beğendi.
  • 27-02-2021, 23:37:03
    #6
    neden jquery kullanmıyorken yapılamasın ki?
    Sonuçta jquery, javascriptten türeyen bir kütüphane olduğu için jquery de yaptığınız herşeyi javascriptte de yapabilirsiniz.
    Sadece yolları biraz uzatmış olursunuz, bkz:

      document.querySelectorAll(".box").forEach((element) => {
            element.onclick = function() {
                document.querySelectorAll(".box-click").forEach((element) => {
                    element.classList.remove("box-click");
                });
                this.classList.toggle("box-click");
            };
        });
  • 27-02-2021, 23:47:25
    #7
    ebasit adlı üyeden alıntı: mesajı görüntüle
    jquery kullanıyorsanız yapılabilir
    $('.box').on('click',function(){
    var item = $(this);
    /* tüm boxlardan tiklandiyi kaldır */
    $('.box').removeClass('tiklanti');
    /* o an tıklanılan box a tiklandi ekle */
    item.addClass('tiklandi');
    });
    çok teşekkürler
  • 28-02-2021, 20:12:40
    #8
    ebasit adlı üyeden alıntı: mesajı görüntüle
    jquery kullanıyorsanız yapılabilir
    $('.box').on('click',function(){
    var item = $(this);
    /* tüm boxlardan tiklandiyi kaldır */
    $('.box').removeClass('tiklanti');
    /* o an tıklanılan box a tiklandi ekle */
    item.addClass('tiklandi');
    });
    Misafir adlı üyeden alıntı: mesajı görüntüle
    <script>
    $(document).on('click','.box',function(){
    $(this).toggleClass('tiklandi');
    });
    </script>

    * jquery gerektirir.
    Değerli hocalarım, dünden beri kendim yapabilirmiyim dedim ama olmadı.
    Hangi dive tıklarsak onun classına tıklandı yazdırıyorduk ya. Tıklanan dive tekrar tıkladığımda tıklandı yazısını classtan nasıl kaldırabiliriz? @rengaver hocam sizin yazdığınız kod ile oluyordu fakat @ebasit hocam sizin kodu kullanıyorum ama onda da olmuyor. saygılar.
  • 28-02-2021, 20:21:00
    #9
    $('.box').on('click',function(){
                    var this_item = $(this);
                    $('.box').not(this_item).removeClass('tiklandi');
                    this_item.toggleClass('tiklandi');
                });
    bu şekilde değiştiriseniz çalışacaktır