將點擊偵聽器添加到Javascript對象中生成的代碼中

Question

我正在創建一個Javascript/jQuery滑塊類，它在調用時在頁面上構建幻燈片放映。

這裏是我的擴增儀對象代碼：

//Cycle 
var Cycler = function(options) { 
    this.cycleElement = options.cycleElement; 
    this.speed = options.speed || 5000; 
    this.effect = options.effect || "linear"; 
    this.currentItem = null;  
    this.children = this.addItemsToCycler(); 
    this.buttons = null; 
    if(options.buttonsEl.length != "") { 
     this.buttons = this.generateButtons(); 
    }  

} 

Cycler.prototype.addItemsToCycler = function() { 
    var children = []; 
    jQuery(this.cycleElement + " > div.cycle-object").each(function(item, value) { 
     children.push(value); 
    }); 
    return children; 
} 

Cycler.prototype.generateButtons = function() { 
    var buttons = "<ul>"; 
    var counter = 0; 
    this.children.forEach(function(item) {   
     buttons += "<li><a href='#' data-rel='" + counter + "'></a></li>"; 
     counter++; 
    }); 
    buttons += "</ul>"; 
    jQuery("#cycle-buttons").html(buttons); 
} 

Cycler.prototype.showItem = function() { 
    jQuery(this.children).fadeOut("slow"); 
    jQuery(this.children[this.currentItem]).fadeIn("slow");   
} 

Cycler.prototype.start = function() { 
    if(this.currentItem == null || this.children.length <= this.currentItem) {   
     this.currentItem = 0; 
    } 
    this.showItem(); 

    var self = this; 
    interval = window.setInterval(function() { 
     self.next(); 
    }, this.speed); 
} 

Cycler.prototype.next = function() { 
    if(this.currentItem >= (this.children.length - 1)) { 
     this.currentItem = 0; 
    } else { 
     this.currentItem++; 
    } 
    this.showItem(); 
} 

Cycler.prototype.prev = function() { 
    if(this.currentItem <= 0) { 
     this.currentItem = this.children.length - 1; 
    } else { 
     this.currentItem--; 
    } 
    this.showItem(); 
} 

Cycler.prototype.pause = function() { 
    if(this.interval == null) { 
     console.log("Cycler is already paused"); 
    } else { 
     window.clearInterval(this.interval); 
     this.interval = null; 
    } 
} 

Cycler.prototype.gotoItem = function(gotoItem) { 
    this.currentItem = gotoItem; 
    this.showItem(); 
} 

的標記：

<div id="cycle-wrap"> 
     <div id="background-cycle"> 
      <div data-rel="0" class="cycle-object"></div> 
      <div data-rel="1" class="cycle-object"></div> 
      <div data-rel="2" class="cycle-object"></div>    
     </div> 
     <div class="inner"> 
      <div id="cycle-buttons"> 

      </div> 
     </div> 
    </div> 

而且我的客戶端代碼創建類的實例：

//Cycler 
    var cycler = new Cycler({ 
     cycleElement : "#background-cycle", 
     speed : 5000, 
     effect : "linear", 
     buttonsEl : "#cycle-buttons" 
    }); 

    cycler.start(); 

現在，如果用戶在傳遞給類的'buttonsEl'變量中提供一個元素，我希望該類生成一個列表李元素被點擊時會將用戶帶到該幻燈片。我已經通過'generateButtons'函數完成了這項工作，我已經爲上面所述的'goToItem'創建了原型函數。我使用'data'rel'屬性鏈接li元素和相應的html。

我想要做的是將點擊監聽器添加到每個列表元素上（這是在'generateButtons'函數中生成的），這會將data-rel屬性傳遞給我的'goToItem'函數。有誰知道這將被納入我的代碼的最佳方式，保持良好和OOP。 謝謝

Answer 1

在您的Cycler構造函數中，我們可以將buttonsEl傳遞給generateButtons。然後這個方法將能夠在所需的元素中插入按鈕。

// Not sure if you want this comparison. If works by coercion but it's tricky. And it 
// will fail if your client doesn't pass a buttonsEl option. 
// I would prefer something like this: 
// if(options.buttonsEl && options.buttonsEl.length > 0) { 
if(options.buttonsEl.length != "") { 
    this.buttons = this.generateButtons(options.buttonsEl); 
}  

的generateButtons可能是這樣的：

Cycler.prototype.generateButtons = function(buttonsEl) { 
    var $buttons = jQuery("<ul></ul>"); 
    this.children.forEach(function(item, counter) {   
     $buttons.append("<li><a href='#' data-rel='" + counter + "'></a></li>"); 
    }); 
    // Capture cycler this to be able to invoke the gotoItem method 
    // within the event handler 
    var that = this; 
    $buttons.on('click', 'li', function() { 
     that.gotoItem($(this).find('a').data('rel')); 
    }); 
    jQuery(buttonsEl).html($buttons); 

    return $buttons; 
}