javascript - 隐藏其他元素后将图像移动到第一个位置

标签 javascript php jquery css reactjs

我需要你的帮助。当我填充图像库并选择第二个、第三个……等位置的图像时，图像是静态的，不会动态地将位置更改为左侧第一个。 (参见屏幕)

我的代码:

product_gallery.html

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/gallery/js/gallery_button.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>

</div>

</body>
</html>

style_gallery.css

@font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }

body {

  }

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}
.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}
.thumbnails.grid a.double{
  width: calc(50% - 4px);
}
.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}
@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }
  .thumbnails.grid a.double{
    width: calc(100% - 4px);
  }
}
@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin:auto;
  padding-top: 28px;
  padding-bottom:20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

.logo {
  font-family: ISOCT3;
  font-size: 24px;
  font-weight: bolder;
  display: block;
  color: #b8860b;
  padding-top:25px;
  margin: 0px auto 15px auto;
  max-width: 90%;
  height: auto !important;
  letter-spacing: 2px;
}
}

.logo_link {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
    background-color: #D29990;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    line-height: 50px;
    @include border-radius(50%);
    display: inline-block;
    @include transition( all .2s ease-in-out);

    &:hover {
      background-color: saturate( $pink, 20%);
    }
}

.nav_buttons{
  margin: 0 auto;
   padding-left: 20px;
  }

gallery_button.js

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();

  });
});

这是显示问题所在的屏幕:

enter image description here

最佳答案

您的代码非常接近工作，如果我删除网格类(在缩略图 div 上)，它将产生您想要的行为，而无需任何额外的修改，但您很可能需要网格行为。

即使您隐藏了 img 元素，它们的父元素(a anchor 元素)也不会隐藏。您应该能够隐藏/显示图像的父元素(a anchor 元素)以获得所需的行为。

正如您从下面修改后的 js 中看到的，这只是在显示/隐藏选择器上调整的一个额外的 .parent() 调用:

$('#portfolio').find('img').parent().show(); 
$('#portfolio').find('img').not(theFilter).parent().hide();

对于 future 的问题，还有一个额外的建议:通常，通过使用 StackOverflow 中内置的 Javascript/HTML/CSS 片段工具(对于可以使用的图像)，人们会更容易回答您的问题 + 查看您所看到的内容就像我下面使用的占位符网站一样)。

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').parent().show(); 
   $('#portfolio').find('img').not(theFilter).parent().hide();

  });
});
@font-face {
  font-family: "ISOCT3";
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}

body {}

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}

.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}

.thumbnails.grid a.double {
  width: calc(50% - 4px);
}

.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}

@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }

  .thumbnails.grid a.double {
    width: calc(100% - 4px);
  }
}

@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin: auto;
  padding-top: 28px;
  padding-bottom: 20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

  .logo {
    font-family: ISOCT3;
    font-size: 24px;
    font-weight: bolder;
    display: block;
    color: #b8860b;
    padding-top: 25px;
    margin: 0px auto 15px auto;
    max-width: 90%;
    height: auto !important;
    letter-spacing: 2px;
  }
}

.logo_link {
  color: inherit;
  /* blue colors for links too */
  text-decoration: inherit;
  /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
  background-color: #D29990;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  line-height: 50px;
  @include border-radius(50%);
  display: inline-block;
  @include transition(all .2s ease-in-out);

  &:hover {
    background-color: saturate($pink, 20%);
  }
}

.nav_buttons {
  margin: 0 auto;
  padding-left: 20px;
}
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>

</div>

</body>
</html>

关于javascript - 隐藏其他元素后将图像移动到第一个位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60122366/

上一篇：javascript - ReactDOM.findDOMNode() 使用 React.Children child

下一篇：javascript - classList.add(未捕获的类型错误 : Cannot read property 'add' of undefined)

相关文章：

javascript - Jquery 使用复选框按类而不是名称更改下拉列表

javascript - 两个提交一个ajax一个常规表单

javascript - Canvas 动画循环不起作用

javascript - 使用 react-modal 更改模态的样式

javascript - 仅保存 Javascript 对象的原始属性的最优雅的方法

php - Visual Studio 2010 中的原生 PHP 支持？

javascript - 将下拉列表中的值与用户输入连接起来

php - 是否有任何已知的 php 库可以像 Quora 在其通知提要中那样标记文本更改？如果不是，我应该使用什么算法？

php - 如何使用外键从三个表中选择所有数据

javascript - 附加选择设置值jquery

©2024 IT工具网  联系我们