jQuery自定义插件更改应用于所有实例

时间：2016-06-24 11:06:31

标签： javascript jquery html css

我已经创建了这个JavaScript函数，如果我将它用于1个画廊，但是如果我用它2来改变第一个画廊中的画廊，我知道我很接近但是不能很好地弄清楚这个最后一点，我需要使用.each函数吗？

$.fn.holidayhomegallery = function() {

  $('.photo-thumbnails .thumbnail').click(function() {
    $('.photo-thumbnails .thumbnail').removeClass('current');
    $(this).addClass('current');
    var path = $(this).find('img').attr('src');
    $('.big-photo img').attr('src', path);
  });

  return this
}

$('.photo-other').holidayhomegallery();
.gallery-photos {
  float: left;
}
.gallery-photos .big-photo {
  display: inline-block;
  background-color: #ffffff;
  margin-right: 0px;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
  float: left;
}
.gallery-photos .big-photo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
  float: left;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 31%;
  cursor: pointer;
  margin-left: 1%;
  margin-bottom: 0%;
  margin-top: 1%;
  margin-right: 1%;
  opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
  opacity: 1;
  background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
  margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
  height: 100%;
  overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="gallery-photos">
  <div class="big-photo">
    <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
  </div>
  <div id="photo-abi" class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
      </div>
    </div>
  </div>

</div>


<div class="gallery-photos">
  <div class="big-photo">
    <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
  </div>
  <div id="photo-abi" class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
      </div>
    </div>
  </div>

</div>

1 个答案:

答案 0 :(得分：0)

您可以使用容器类。由于主容器在事件处理程序中有一个类，因此获取此元素并使用此元素来获取与此实例关联的其他元素（此容器的子元素）。

所以，而不是全局选择器

$('.big-photo img').attr('src', path);

将选择页面上的所有匹配元素，使用find()的后代选择器。

container.find('.big-photo img').attr('src', path)

<强>代码： 

$('.photo-thumbnails .thumbnail').click(function () {
    // Get the main container of the gallery
    var container = $(this).closest('.gallery-photos');

    // Use that container to get elements inside it
    container.find('.photo-thumbnails .thumbnail').removeClass('current');
    $(this).addClass('current');
    var path = $(this).find('img').attr('src');

    // Use that container to get elements inside it
    container.find('.big-photo img').attr('src', path);
});

＆＃13;
＆＃13; 
$.fn.holidayhomegallery = function() {

  $('.photo-thumbnails .thumbnail').click(function() {
    var container = $(this).closest('.gallery-photos');
    container.find('.photo-thumbnails .thumbnail').removeClass('current');
    $(this).addClass('current');
    var path = $(this).find('img').attr('src');
    container.find('.big-photo img').attr('src', path);
  });

  return this;
};


$('.photo-other').holidayhomegallery();
＆＃13; 
.gallery-photos {
  float: left;
}
.gallery-photos .big-photo {
  display: inline-block;
  background-color: #ffffff;
  margin-right: 0px;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
  float: left;
}
.gallery-photos .big-photo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
  float: left;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 31%;
  cursor: pointer;
  margin-left: 1%;
  margin-bottom: 0%;
  margin-top: 1%;
  margin-right: 1%;
  opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
  opacity: 1;
  background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
  margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
  height: 100%;
  overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gallery-photos">
  <div class="big-photo">
    <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
  </div>
  <div id="photo-abi" class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
      </div>
    </div>
  </div>
</div>


<div class="gallery-photos">
  <div class="big-photo">
    <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
  </div>
  <div id="photo-abi" class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
      </div>
    </div>
    <div class="thumbnail last ">
      <div class="thumbnail-inner">
        <img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
      </div>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

<强>建议： 

$('.photo-thumbnails .thumbnail').click(function () {
    // Cache this instance
    var $this = $(this);
    // Get the main container of the gallery
    var container = $this.closest('.gallery-photos');

    // Select only the thumbnail elements having current class
    container.find('.photo-thumbnails .thumbnail.current').removeClass('current');
    $this.addClass('current');

    // Use that container to get elements inside it
    container.find('.big-photo img').attr('src', $this.find('img').attr('src'));
});
相关问题
最新问题