在多个类和子节点上调用相同的jquery函数

Question

好的，所以我已经找了一段时间，虽然有很多解决方案，但我不能让它们发挥作用......我错过了什么？

我的页面上有4个单独的部分，我想要'视差'，我希望它尽可能轻，并且不想摆弄插件。所以......

我的HTML看起来像这样：

<section class="pageStripe">
  <div class="parallaxImage" style="background-image:url(/default-header.jpg);">  
    <div class="row">
      <div class="small-12 columns parallaxText">
        <div class="row">
          <div class="small-12 medium-6 columns">
            <div class="parallaxTitle"><h1>Title</h1></div>              
          </div>
          <div class="small-12 medium-6 columns">
            <div class="parallaxContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>              
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pageStripe">
  <div class="parallaxImage" style="background-image:url(/default-header.jpg);">  
    <div class="row">
      <div class="small-12 columns parallaxText">
        <div class="row">
          <div class="small-12 medium-6 columns">
            <div class="parallaxTitle"><h1>Title</h1></div>              
          </div>
          <div class="small-12 medium-6 columns">
            <div class="parallaxContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>              
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pageStripe">
  <div class="parallaxImage" style="background-image:url(/default-header.jpg);">  
    <div class="row">
      <div class="small-12 columns parallaxText">
        <div class="row">
          <div class="small-12 medium-6 columns">
            <div class="parallaxTitle"><h1>Title</h1></div>              
          </div>
          <div class="small-12 medium-6 columns">
            <div class="parallaxContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>              
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我的jquery是这样的：

$(window).on('scroll',parallax);
$('.parallaxImage').each(function parallax() {
  var scrolled = $(window).scrollTop() - $(this).offset().top;;
  $(this).css('background-position','center ' + -(scrolled*0.35)+'px');
  $(this).children('.parallaxText').css('top',(scrolled*0.25)+'px');
}); 

所有帮助非常感谢。感谢