Question

所以我把一些东西放在一起工作，除了一件小事以外，我已经让它按照我想要的方式工作了。在页面的底部，我有3个圆圈作为链接来更改滑块上的幻灯片，但是当我点击它时，它并没有完全改变css属性来改变我点击的圆圈的颜色。这可能没有意义，所以我要链接我的小提琴（http://jsfiddle.net/AMN6N/1/）我认为它与这行代码有特别的关系：

handleNavClick: function(event, el)
{
    event.preventDefault();
    var position = $(el).attr("href").split("-").pop();
    this.el.slider.animate(
    {
        scrollLeft: position * this.slideWidth
    },
    this.timing);
    this.changeActiveNav(el);
},
changeActiveNav: function(el)
{
    this.el.allNavButtons.removeClass("active");
    $(el).addClass("active");
}
};
slider.init();

Here是网页的临时链接。

Answer 1

您只需要加载一个SimplySliderTest.js文件。

在执行javascript之后加载元素，因此没有任何东西绑定到它们。

您有两种选择：

在页面加载后，将JS加载到SimplySliderTest.js中。即。

$(function(){

var slider = 
    {
    el:
    {
        slider: $("#slider"),
        allSlides: $(".slide"),
        sliderNav: $(".slider-nav"),
        allNavButtons: $(".slider-nav > a")
    },

    timing: 800,
    slideWidth: 300,

    init: function() 
    {
        this.bindUIEvents();
    },

    bindUIEvents: function() 
    {
        this.el.slider.on("scroll", function(event)
        {
            slider.moveSlidePosition(event);
        });
        this.el.sliderNav.on("click", "a", function(event)
        {
            slider.handleNavClick(event, this);
        });
    },
    moveSlidePosition: function(event)
    {
        this.el.allSlides.css(
        {
            "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
        });
    },
    handleNavClick: function(event, el)
    {
        event.preventDefault();
        var position = $(el).attr("href").split("-").pop();
        this.el.slider.animate(
        {
            scrollLeft: position * this.slideWidth
        },
        this.timing);
        this.changeActiveNav(el);
    },
    changeActiveNav: function(el)
    {
        this.el.allNavButtons.removeClass("active");
        $(el).addClass("active");
    }
    };
    slider.init();
});

将<script type="text/javascript" src="SimplySliderTest.js"></script>移至页面底部，以便在元素后加载

JS改变了css属性

1 个答案: