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

};

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.