JavaScript對象綁定

Question

編輯

固定代碼在下面！再次感謝andyk！請參閱下面的原始問題。

HTML

<!-- feature --> 
<div class="feature col-md-8"> 

    <div class="feature-slides"> 
    <div class="feature-slide active" style="background-image: url('/images/1.jpg');"></div> 
    <div class="feature-slide" style="background-image: url('/images/2.jpg');"></div>  
    </div> 

    <ul class="row feature-pagination"> 
    <li data-slide-index="0" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/1.jpg');"></button> 
    </li> 
    <li data-slide-index="1" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/2.jpg');"></button> 
    </li> 
    </ul> 

</div> 

<!-- feature --> 
<div class="feature col-md-8"> 

    <div class="feature-slides"> 
    <div class="feature-slide active" style="background-image: url('/images/1.jpg');"></div> 
    <div class="feature-slide" style="background-image: url('/images/2.jpg');"></div>  
    </div> 

    <ul class="row feature-pagination"> 
    <li data-slide-index="0" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/1.jpg');"></button> 
    </li> 
    <li data-slide-index="1" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/2.jpg');"></button> 
    </li> 
    </ul> 

</div> 

的JavaScript

<script> 

    // feature class + constructor 
    var Feature = function(element) { 

    //THIS WAS THE PROBLEM, NEEDED A VAR 
    var _this = this; 

    //collect elements as jqueries 
    _this.element = $(element); 
    _this.slides = $(_this.element).find('.feature-slide'); 
    _this.pagination = $(_this.element).find('.feature-pagination > li'); 

    //setup onclicks for pagination 
    $(_this.pagination).click(function() { 
     _slide = this; 
     var slideIndexToDisplay = $(_slide).attr("data-slide-index"); 
     $(_this.slides).removeClass('active'); 
     $(_this.slides).eq(slideIndexToDisplay).addClass('active'); 
    }); 

    }; 

    $(document).ready(function() { 

    // init feature widget 
    var features = $('.feature'); 
    $.each(features, function(){ 
     _this = this; 
     _feature = new Feature(_this); 
    }); 

    }); 

</script> 

原來的問題

這是相當愚蠢的，因爲我覺得我已經在此之前一百萬次完成，但我不確定我在這裏做錯了什麼。我希望每個功能隻影響自己，但第二個功能對象更改幻燈片的第一個，而不是第二個，所以我的對象滲入對方。

HTML

<!-- feature --> 
<div class="feature col-md-8"> 

    <div class="feature-slides"> 
    <div class="feature-slide active" style="background-image: url('/images/1.jpg');"></div> 
    <div class="feature-slide" style="background-image: url('/images/2.jpg');"></div>  
    </div> 

    <ul class="row feature-pagination"> 
    <li data-slide-index="0" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/1.jpg');"></button> 
    </li> 
    <li data-slide-index="1" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/2.jpg');"></button> 
    </li> 
    </ul> 

</div> 

<!-- feature --> 
<div class="feature col-md-8"> 

    <div class="feature-slides"> 
    <div class="feature-slide active" style="background-image: url('/images/1.jpg');"></div> 
    <div class="feature-slide" style="background-image: url('/images/2.jpg');"></div>  
    </div> 

    <ul class="row feature-pagination"> 
    <li data-slide-index="0" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/1.jpg');"></button> 
    </li> 
    <li data-slide-index="1" class="col-xs-4 col-sm-3 col-md-2"> 
     <button style="background-image: url('/images/2.jpg');"></button> 
    </li> 
    </ul> 

</div> 

的JavaScript

$(document).ready(function() { 

    // init feature widget 
    $('.feature').each(function(){ 
    _this = this; 
    feature = new Feature(_this); 
    // feature.init(); 
    }); 

}); 

// feature class + constructor 
var Feature = function (element) { 

    //save this! 
    _this = this; 

    //collect elements as jqueries 
    _this.element = $(element); 
    _this.slides = $(_this.element).find('.feature-slide'); 
    _this.pagination = $(_this.element).find('.feature-pagination > li'); 

    //setup onclicks for pagination 
    $(_this.pagination).click(function() { 
    _slide = this; 
    slideIndexToDisplay = $(_slide).attr("data-slide-index"); 
    $(_this.slides).removeClass('active'); 
    $(_this.slides).eq(slideIndexToDisplay).addClass('active'); 
    }); 

}; 

Answer 1

硬盤沒有呈現例子說，但它看起來像你需要初始化_this：

var _this = this; 

由於您沒有var,_this在全局範圍內被定義，並且每次調用.each回調並調用Feature時都會被覆蓋。