JavaScript object binding

Question

EDIT

Fixed code below! Thanks again andyk! See further below for original question.

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 QUESTION

This is rather silly, as I feel like I've done this a million times before, but I'm not sure what I'm doing wrong here. I want each feature to affect itself only, but the second feature object changes slides on the first and not the second, so my objects are bleeding into each other.

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');
 });
};

• jfriend00: I rather doubt we can help without seeing a rendered example (including CSS) of this HTML so we can see what you're really talking about.

Answer 1

Hard to say without a rendered example, but it looks like you need to initialize _this:

var _this = this;

Since you don't have a var, _this gets defined in the global scope and is overwritten each time the .each callback is invoked and Feature is called.