搜索
搜索

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

debugcn 发表于 Dev
11
丹尼尔·爱德华兹

我已经创建了这个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>

杜沙尔

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

因此，而不是全局选择器

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


$.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();
.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>

建议：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

无法将自定义listSelector应用于ListView

来自分类Dev

将自定义样式应用于页面上的所有按钮

来自分类Dev

将不同的属性应用于所有方法的自定义类属性

来自分类Dev

HTML / CSS如何将CSS应用于具有自定义数据属性的“ a”？

来自分类Dev

Apache POI样式已应用于所有单元

来自分类Dev

将自定义函数应用于具有通用名称的任何数据集

来自分类Dev

将自定义主题应用于Odoo应用

来自分类Dev

将自定义样式应用于微调器

来自分类Dev

AngularJs有条件地将自定义指令应用于HTML

来自分类Dev

将自定义函数应用于数据框

来自分类Dev

熊猫滚动应用于自定义功能

来自分类Dev

将自定义功能应用于熊猫df

来自分类Dev

将自定义累积功能应用于熊猫

来自分类Dev

将自定义累积功能应用于熊猫

来自分类Dev

如何将自定义渲染应用于除Symfony 2.1项目中的某些字段类型以外的所有表单字段

来自分类Dev

jQuery插件开发-跟踪已应用于所有元素的插件

来自分类Dev

jQuery Mobile将自定义主题应用于自动分隔器

来自分类Dev

将不同的属性应用于所有方法的自定义类属性

来自分类Dev

HTML / CSS如何将CSS应用于具有自定义数据属性的“ a”？

来自分类Dev

如何清除应用于元素的自定义样式？

来自分类Dev

自定义Bash提示并将修改应用于所有登录的用户

来自分类Dev

Angular JS指令将更改应用于所有实例

来自分类Dev

使用 JQuery 中的自定义数据属性将 css 应用于 tr

来自分类Dev

试图隐藏/显示一个 div 但是 .slideToggle() 应用于页面上的所有 div - 高级自定义字段中继器

来自分类Dev

将语义应用于自定义 git 流

来自分类Dev

我如何获取已安装的 Android 系统字体列表并应用于自定义键盘

来自分类Dev

Fullcalendar 的 fc-highlight 未应用于自定义日历中的日期更改

来自分类Dev

如何使自定义 ModelBinder 自动应用于某种类型的所有属性

来自分类Dev

Formik - “脏”被应用于具有相同自定义组件的所有实例

Related 相关文章

  1. 1

    无法将自定义listSelector应用于ListView

  2. 2

    将自定义样式应用于页面上的所有按钮

  3. 3

    将不同的属性应用于所有方法的自定义类属性

  4. 4

    HTML / CSS如何将CSS应用于具有自定义数据属性的“ a”？

  5. 5

    Apache POI样式已应用于所有单元

  6. 6

    将自定义函数应用于具有通用名称的任何数据集

  7. 7

    将自定义主题应用于Odoo应用

  8. 8

    将自定义样式应用于微调器

  9. 9

    AngularJs有条件地将自定义指令应用于HTML

  10. 10

    将自定义函数应用于数据框

  11. 11

    熊猫滚动应用于自定义功能

  12. 12

    将自定义功能应用于熊猫df

  13. 13

    将自定义累积功能应用于熊猫

  14. 14

    将自定义累积功能应用于熊猫

  15. 15

    如何将自定义渲染应用于除Symfony 2.1项目中的某些字段类型以外的所有表单字段

  16. 16

    jQuery插件开发-跟踪已应用于所有元素的插件

  17. 17

    jQuery Mobile将自定义主题应用于自动分隔器

  18. 18

    将不同的属性应用于所有方法的自定义类属性

  19. 19

    HTML / CSS如何将CSS应用于具有自定义数据属性的“ a”？

  20. 20

    如何清除应用于元素的自定义样式？

  21. 21

    自定义Bash提示并将修改应用于所有登录的用户

  22. 22

    Angular JS指令将更改应用于所有实例

  23. 23

    使用 JQuery 中的自定义数据属性将 css 应用于 tr

  24. 24

    试图隐藏/显示一个 div 但是 .slideToggle() 应用于页面上的所有 div - 高级自定义字段中继器

  25. 25

    将语义应用于自定义 git 流

  26. 26

    我如何获取已安装的 Android 系统字体列表并应用于自定义键盘

  27. 27

    Fullcalendar 的 fc-highlight 未应用于自定义日历中的日期更改

  28. 28

    如何使自定义 ModelBinder 自动应用于某种类型的所有属性

  29. 29

    Formik - “脏”被应用于具有相同自定义组件的所有实例

热门标签

归档