Question

我说实话，我对JQuery非常陌生，并且仍然试图混淆我的方式。话虽如此，我试图创造一个简单的视差效果，但我无法让它发挥作用。每当我更改数据速度属性时，它都会影响同一个类的所有Div，而不仅仅是它所在的Div。因此，在下面的示例中，当2个div应该以不同的速度滚动时，它们以与第一个div中的任何内容完全相同的速度（2）滚动。

我的HTML是：

<div class="parallax" id="content1" data-speed="2">
Content
</div>
<div class="parallax" id="content2" data-speed="3">
Content 2
</div>

我的Jquery是：

jQuery(function( $ ){

  // Enable parallax and fade effects on homepage sections
  $(window).scroll(function(speed){

    scrolltop = $(window).scrollTop()
    scrollwindow = scrolltop + $(window).height();
    speed = $(".parallax").data("speed")
    $(".parallax").css("backgroundPosition", "50% " + -(scrolltop*speed) + "px");

  });

});

我很确定这只是我不熟悉JQuery以及它是如何工作的情况......有人可以帮助我吗？

谢谢！

Answer 1

您的问题归因于以下几行：

speed = $(".parallax").data("speed")
$(".parallax").css("backgroundPosition", "50% " + -(scrolltop*speed) + "px");

$(".parallax")选择带有class="parallax"的所有元素，但.data("speed")只会提取集合中第一个元素的值。

然后您将该值应用于第二行中所有 $(".parallax")元素，这些元素解释了您所看到的行为。

您需要遍历所有元素并单独应用speed：

$(window).scroll(function(){
    var scrolltop = $(window).scrollTop();

    $(".parallax").each(function() {
        var $el = $(this),
            speed = $el.data("speed");

        $el.css("backgroundPosition", "50% " + -(scrolltop * speed) + "px");
    });
});

Answer 2

尝试......

jQuery(function( $ ){
// Enable parallax and fade effects on homepage sections
  $(window).scroll(function(speed){
    scrolltop = $(window).scrollTop()
    scrollwindow = scrolltop + $(window).height();
    var parallax = $(".parallax");
    $.each(parallax, function(index, value) {
      speed = $(parallax[index]).data("speed");
      $(parallax[index]).css("backgroundPosition", "50% " + -(scrolltop*speed) + "px");
  });
});

循环应允许将速度单独应用于每个视差类。

JQuery Data值适用于所有div而不仅仅是它自己

2 个答案: