在滾動上更改顏色

Question

試圖將類添加到img和標題（h3）以更改顏色。它正在向.test-shadow添加類，但是h3不起作用。試圖改變.closest/.find兄弟姐妹，但他們也不工作。想法？

\t   /* highlight border of winner */ 
 
     $('.img-winner').each(function(i){ 
 
      
 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
      /* If the object is completely visible in the window, animate border or box shadow */ 
 
      if(bottom_of_window > bottom_of_object){ 
 
       
 
\t \t \t $(this).siblings('.test-shadow:first').addClass('greenit'); 
 
\t \t \t $(this).siblings('h3.test-who-us:first').addClass('green'); 
 
        
 
      } 
 
      
 
     });

<ul class="2-column center test-images"> 
 
<li> 
 
<h3 class="test-who-us">Medsite Medical</h3> 
 
<div class="test-img"> 
 
<img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop"> 
 
<div class="test-shadow"></div> 
 
</div> 
 
</li> 
 
<li> 
 
<h3 class="test-who-them">Top competitor</h3> 
 
<div class="test-img"> 
 
<img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors"> 
 
<div class="test-shadow"></div> 
 
</div> 
 
</li> 
 
</ul>

Answer 1

的<h3是.img-winner的父的同級。

因此，與$(this).parent().siblings('h3.test-who-us:first')

/* highlight border of winner */ 
 
$('.img-winner').each(function(i) { 
 

 
    var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
    var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 

 
    /* If the object is completely visible in the window, animate border or box shadow */ 
 
    if (bottom_of_window > bottom_of_object) { 
 

 
    $(this).siblings('.test-shadow:first').addClass('greenit'); 
 
    $(this).parent().siblings('h3.test-who-us:first').addClass('green'); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="2-column center test-images"> 
 
    <li> 
 
    <h3 class="test-who-us">Medsite Medical</h3> 
 
    <div class="test-img"> 
 
     <img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop"> 
 
     <div class="test-shadow"></div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h3 class="test-who-them">Top competitor</h3> 
 
    <div class="test-img"> 
 
     <img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors"> 
 
     <div class="test-shadow"></div> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

更換$(this).siblings('h3.test-who-us:first')沒有必要爲每個循環。 jQuery選擇器已經循環遍歷HTML抓取所有適用的元素。也不需要在滾動事件上創建監視器。如果具有img-winner類的元素已經存在於文檔中，但不在頁面上，則繼續前進並設置樣式或將該類添加到HTML中效率更高。渲染後改變東西通常會導致迴流。 Prevent Browser Reflow

但是，這是如何根據您的HTML代碼實現您想要的。

var $winnerElem = $('.img-winner'); // cache the winner element 

// add classes 
$winnerElem.addClass('greenit'); 
$winnerElem.parent().siblings().addClass('green');