JavaScript nesnesi ciltleme

Question

EDIT

Aşağıdaki kod! Tekrar teşekkürler andyk! Orijinal soru için aşağıya bakınız.

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> 

ORİJİNAL SORU

Bunu milyonlarca kez önce yaptığım gibi hissediyorum gibi bu, oldukça saçma ama Burada ne yapıyorum emin değilim. Her bir özelliğin kendini etkilemesini istiyorum, ancak ikinci özellik nesnesi, ilk önce değil, ikincideki slaytları değiştirir, böylece nesnelerim birbirine karışıyor.

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

bir hale getirilen örnek olmadan söylemek zor, ancak _this başlatmak gerekiyor gibi görünüyor:

var _this = this; 

var'dan beri, _this genel kapsamı tanımlanır ve her .each geri çağrısı çağrıldığında üzerine yazılır ve Feature çağrılır.