JS更改CSS屬性

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();

這是該網頁的臨時鏈接。

Answer 1

您只需要加載一個SimplySliderTest.js文件。

元素是在執行javascript后加載的，因此沒有任何綁定。

您有兩種選擇：

1. 頁面加載后，在SimplySliderTest.js中加載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(); }); 

2. 將<script type="text/javascript" src="SimplySliderTest.js"></script>移到頁面底部，以便在元素之后加載