• 26-02-2021, 16:32:46
    #1
    Merhaba arkadaşlar,

        
                       $(document).ready(function(){
      $(".showcase").hover(function(){
        $(".colored_radio").css("display", "block");
       $this.(".color_text").css("display", "none");
        }, function(){
            $(".colored_radio").css("display", "none");
       $(".color_text").css("display", "block");
      });
    });
    Bu şekilde bir kod yazdım. Amacım aşağıdaki görselin altındaki renk varyantlarının olduğu radio butonları her ürünün üzerine geldiğinde görünmesini sağlamak. Fakat şu anda hepsi görünüyor. Kodun hatalı olduğunun farkındayım. Nasıl düzeltebilirim?

    <div class="showcase">
        <div class="showcase-image-container">
            <a class="showcase-label-container" href="/urun/dijital-baskili-kapsonlu-t-shirt" aria-label="Product Detail">
              
                                            <div class="discount-label">%14</div>
                                                        <div class="sold-out-label d-none"><span>Tükendi</span></div>
                        </a>
            <div class="showcase-favorites">
                <a href="javascript:void(0);" class="add-my-favorites" data-selector="add-my-favorites" data-product-id="1212" aria-label="Add To Favorites">
                    <i class="far fa-heart"></i>
                </a>
            </div>
            <div class="showcase-image">
                <div class="showcase-image-item">
                    <a href="/urun/dijital-baskili-kapsonlu-t-shirt" title="DİJİTAL BASKILI KAPŞONLU T-SHIRT">
                                                <img class="lazyload" src="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-58-jpg.jpeg?revision=1613206904" data-src="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-59-jpg.jpeg?revision=1613206906" alt="DİJİTAL BASKILI KAPŞONLU T-SHIRT">
                                        </a>
                </div>
                                <div class="showcase-thumbs-image"><a href="/urun/dijital-baskili-kapsonlu-t-shirt" data-thumb="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-58-jpg.jpeg?revision=1613206904" style="width: 25%;"></a><a href="/urun/dijital-baskili-kapsonlu-t-shirt" data-thumb="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-59-jpg.jpeg?revision=1613206906" style="width: 25%;"></a><a href="/urun/dijital-baskili-kapsonlu-t-shirt" data-thumb="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-60-jpg.jpeg?revision=1613206908" style="width: 25%;"></a><a href="/urun/dijital-baskili-kapsonlu-t-shirt" data-thumb="//st3.myideasoft.com/idea/hn/38/myassets/products/212/dijital-baskili-kapsonlu-t-shirt-61-jpg.jpeg?revision=1613206910" style="width: 25%;"></a></div>
                        </div>
        </div>
        <div class="showcase-content">
            <div class="showcase-title">
                <a href="/urun/dijital-baskili-kapsonlu-t-shirt" title="DİJİTAL BASKILI KAPŞONLU T-SHIRT">DİJİTAL BASKILI KAPŞONLU T-SHIRT</a>
            </div>
                        <div class="showcase-price has-discount">
                                        <div class="showcase-price-old">
                            115,95 TL
                        </div>
                                    <div class="showcase-price-new">
                        99,95 TL
                    </div>
                </div>
      
                  <div class="colored-group">
          <p class="color_text" style="display: block;">6 Renk</p>
          <div class="colored_radio" style="display: none;">
            <label class="orange">
          <input type="radio" name="color" value="orange">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
    
            <label class="amber">
          <input type="radio" name="color" value="amber">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
    
            <label class="lime">
          <input type="radio" name="color" value="lime">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
    
            <label class="teal">
          <input type="radio" name="color" value="teal">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
    
            <label class="blue">
          <input type="radio" name="color" value="blue">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
    
            <label class="indigo">
          <input type="radio" name="color" value="indigo">
          <div class="layer"></div>
          <div class="button"><span></span></div>
        </label>
            </div>
        </div>
        </div>
    </div>
  • 26-02-2021, 22:28:57
    #2
    bunu neden javascript ile yapmaya çalışıyorsunuz ki?
    css ile daha kolay yapabilirsiniz. hâlâ çözemediyseniz yazabilirim kodu.
  • 27-02-2021, 08:49:43
    #3
    tolgaand adlı üyeden alıntı: mesajı görüntüle
    bunu neden javascript ile yapmaya çalışıyorsunuz ki?
    css ile daha kolay yapabilirsiniz. hâlâ çözemediyseniz yazabilirim kodu.
    henüz çözemedim yardımcı olabilirseniz çok memnun olurum. css ile denedim ama üst selectörden mi neden olduğunu anlamadım seçemedi. Bir üst selectörü seçiyor fakat onun üstündeki selektörü seçemiyorum.
  • 27-02-2021, 09:17:00
    #4
    Öncelikle this yazımınız yanlış
    $this. değil $(this).

    ikinci olarak, .colored_radio diye seçtiğiniz zaman sayfadaki o class a sahip bütün divleri seçiyorsunuz aslında hover olanın alt elementi olanını seçmeniz gerek
    $(this).find(".colored_radio") şeklinde

    aşağıdaki gibi bir şeyler olması gerek

    $(document).ready(function(){
    			$(".showcase").hover(function(){
    				$(this).find(".colored_text").css("display", "none");
    				$(this).find(".colored_radio").css("display", "block");
    			}, function(){
    				$(this).find(".colored_radio").css("display", "none");
    				$(this).find(".color_text").css("display", "block");
    			});
    		});
  • 27-02-2021, 09:25:18
    #5
    Yuc3L adlı üyeden alıntı: mesajı görüntüle
    Öncelikle this yazımınız yanlış
    $this. değil $(this).

    ikinci olarak, .colored_radio diye seçtiğiniz zaman sayfadaki o class a sahip bütün divleri seçiyorsunuz aslında hover olanın alt elementi olanını seçmeniz gerek
    $(this).find(".colored_radio") şeklinde

    aşağıdaki gibi bir şeyler olması gerek

    $(document).ready(function(){
                $(".showcase").hover(function(){
                    $(this).find(".colored_text").css("display", "none");
                    $(this).find(".colored_radio").css("display", "block");
                }, function(){
                    $(this).find(".colored_radio").css("display", "none");
                    $(this).find(".color_text").css("display", "block");
                });
            });
    Çok teşekkürler sorunum çözüldü. Kod çalıştı. İlginiz için tekrar teşekkür ederim.