编辑

修复了下面的代码！再次感谢安迪克！有关原始问题，请参见下文。

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