Перемещение объекта JavaScript

Question

EDIT

Фиксированный код ниже! Еще раз спасибо 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> 

ORIGINAL ВОПРОС

Это довольно глупо, так как я чувствую, что я сделал это миллион раз, но Я не уверен, что я делаю неправильно здесь. Я хочу, чтобы каждая функция влияла только на себя, но второй объект функции меняет слайды на первом, а не на втором, поэтому мои объекты кровоточат друг в друга.

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.