Question

我无法访问我的DOM选择器，即使我已经缓存了＃34;这个＆＃34;在窗口事件之前。

如果我要将其更改为$('.banner')则可行在我的代码之前，我在窗口事件上设置scrolltop设置变量scrolled，我可以使用scrollEvent()在module.scrolled方法中使用该变量var parallax = { init: function() { this.cacheDom(); this.scrollEvent(); }, cacheDom: function() { var $window = $(window), banner = $('.banner'), callout = $('.callout'), bannerHeight = Math.round(banner.outerHeight()), hideElem = false, hasScrolled = false, scrolled; }, scrollEvent: function() { var module = this; $(window).on('scroll', function() { var scrollTop = $(this).scrollTop(); module.banner.css("background-position", '50%' + (scrollTop / 1.75) + "px"); module.callout.css({'position': 'relative', 'top' : scrollTop * 0.75, 'opacity' : 1 - (scrollTop / module.bannerHeight * 2)}); }); } }; parallax.init();。

此外，CSS中的不透明度规则不起作用然而，顶部和相对位置。

       <div class="row">
    <div class="col-3" id="left">
        <i class="fa fa-chevron-left fa-1x"></i>
    </div>
    <div class="col-3" id="test1">
    <div class="testimonial">
        <blockquote>Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Doloribus
            accusamus expedita repellat similique
            odio aspernatur ex, architecto eaque
            quo suscipit.
        </blockquote>
        <div></div>
        <img src="Images/user1.png" style="float: left; padding-right:25px; padding-left:20px;">
        <p style="float:right; font-family: 'Open Sans', sans-serif;">
            <h3>John S.</h3> <span style="font-size: 13px; color: #a9aaac;">Freelancer</span>
        </p>
    </div></div>
    <div class="col-3" id="test2">
        <div class="testimonial">
            <blockquote>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Doloribus
                accusamus expedita repellat similique
                odio aspernatur ex, architecto eaque
                quo suscipit.
            </blockquote>
            <div></div>
            <img src="Images/user1.png" style="float: left; padding-right:25px; padding-left:20px;">
            <p style="float:right; font-family: 'Open Sans', sans-serif;">
            <h3>John S.</h3> <span style="font-size: 13px; color: #a9aaac;">Photographer</span>
            </p>
        </div></div>
    <div class="col-3" id="test3">
        <div class="testimonial">
            <blockquote>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Doloribus
                accusamus expedita repellat similique
                odio aspernatur ex, architecto eaque
                quo suscipit.
            </blockquote>
            <div></div>
            <img src="Images/user1.png" style="float: left; padding-right:25px; padding-left:20px;">
            <p style="float:right; font-family: 'Open Sans', sans-serif;">
            <h3>John S.</h3> <span style="font-size: 13px; color: #a9aaac;">Freelancer</span>
            </p>
        </div></div>
    <div class="col-3" id="test4">
        <div class="testimonial">
            <blockquote>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Doloribus
                accusamus expedita repellat similique
                odio aspernatur ex, architecto eaque
                quo suscipit.
            </blockquote>
            <div></div>
            <img src="Images/user1.png" style="float: left; padding-right:25px; padding-left:20px;">
            <p style="float:right; font-family: 'Open Sans', sans-serif;">
            <h3>John S.</h3> <span style="font-size: 13px; color: #a9aaac;">Photographer</span>
            </p>
        </div></div>

    <div class="col-3" id="right">
        <i class="fa fa-chevron-right fa-1x"></i>
    </div>
</div>

Answer 1

cacheDom()函数设置局部变量，而不是对象属性。将其更改为：

  cacheDom: function() {
    this.$window = $(window);
    this.banner = $('.banner');
    this.callout = $('.callout'),
    this.bannerHeight = Math.round(this.banner.outerHeight());
    this.hideElem = false;
    this.hasScrolled = false;
    this.scrolled = null;
  },

无法访问变量并使用对象文字模块模式应用某些CSS

1 个答案: