单击图像时进行动态文本更改

时间：2017-09-06 04:48:08

标签： javascript html css

我有一排四张图片，每张图片下面都有一些文字。对于移动屏幕，由于每个图像都会更小，我希望文本消失并制作一行而不是具有一些动态文本，因此该文本将根据活动的图像（单击）而改变，这意味着我现在将显示文本仅在单击图像时。我怎样才能做到这一点？到目前为止，我有以下内容：

＆＃13;
＆＃13; 
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px
  padding-left: 16px;
}

.icons-grid  {
  img {margin: 0 auto;}
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
 }
 
@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
   } 
 }
  
@media (min-width:641px) {
  .grid__col--1-4-m {
     width: 25%;
   } 
}
  
.grid__col--1-4-s {
  width:25%;
 }
 
.grid_col--end {
   margin-left: auto;
 }
＆＃13; 
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 1</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 2</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 3</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Te 4'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 4</p>
   </div>
 </div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

js显然在这里效率更高，但你也可以用纯CSS来做到这一点。

在小屏幕上设置.icon-text {display: none}

然后，使用Adjacent sibling selector，您可以在每个img之后定位特定的.icon-text，以便在点击或激活图片时显示

641px截止的基本示例：

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px padding-left: 16px;
}

img {
  margin: 0 auto;
  border: 1px solid red;
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
}

@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
  }
}

@media (min-width:641px) {
  .grid__col--1-4-m {
    width: 25%;
  }
}

.grid__col--1-4-s {
  width: 25%;
}

.grid_col--end {
  margin-left: auto;
}

@media (max-width: 641px) {
  .icon-text {
    display: none;
  }
  img:active+.icon-text,
  img:hover+.icon-text,
  img:focus+.icon-text {
    display: inline-block;
    max-width: 100vw;
    margin: 0 auto;
    background: #131418;
    color: white;
    width: auto;
    padding: 10px 0;
  }
}
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 1</p>
  </div>
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 2</p>
  </div>
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 3</p>
  </div>
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Te 4'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 4</p>
  </div>
</div>

答案 1 :(得分：1)

你可以在不使用JS的情况下实现这一目标 将透明复选框（不透明度：0）作为每个.grid__col（图像之前）的第一个子图像，使用完全相同的图像大小，然后添加以下css：

.grid__col > input:nth-child(1) {
  width: 140px !important;
  height: 100px !important;
  position: absolute !important;
  opacity: 0 !important;
}
.grid__col > input:nth-child(1):checked+img+.icon-text {
  visibility: visible !important;
  display: block !important;
}

.grid__col > input:nth-child(1)是为了确保所需的输入（复选框）是一个孩子，并且第一个孩子的标记名为input .grid__col所以我们想要的trasparent复选框的样式就在那里

.grid__col > input:nth-child(1):checked+img+.icon-text是告诉浏览器，如果我想要的checkbox是checked，则将样式应用于与元素相邻的类名.icon-text的元素img也与选中的checkbox相邻。

＆＃13;
＆＃13; 
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px
  padding-left: 16px;
}

.icons-grid  {
  img {margin: 0 auto;}
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
  visibility: hidden;
  display: none;
 }
 
@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
   } 
 }
  
@media (min-width:641px) {
  .grid__col--1-4-m {
     width: 25%;
   } 
}
  
.grid__col--1-4-s {
  width:25%;
 }
 
.grid_col--end {
   margin-left: auto;
 }
 
.grid__col > input:nth-child(1) {
  width: 140px !important;
  height: 100px !important;
  position: absolute !important;
  opacity: 0 !important;
}
.grid__col > input:nth-child(1):checked+img+.icon-text {
  visibility: visible !important;
  display: block !important;
}
＆＃13; 
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <input type="checkbox"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 1</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
   <input type="checkbox"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 2</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
   <input type="checkbox"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 3</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Te 4'>
   <input type="checkbox"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 4</p>
   </div>
 </div>
＆＃13;
＆＃13;
＆＃13;

修改

假设你想要一个.icon-text出现（当你点击另一个图像时其他的就会消失）。 如果你想用相同的技术做到这一点，那么你唯一要做的就是将input的类型更改为radio并用名称链接它们＆＃34; show-text＆ ＃34;或者是其他东西。 <input type="checkbox"/>到<input type="radio" name="show-text"/>。没有必要改变CSS。

＆＃13;
＆＃13; 
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px
  padding-left: 16px;
}

.icons-grid  {
  img {margin: 0 auto;}
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
  visibility: hidden;
  display: none;
 }
 
@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
   } 
 }
  
@media (min-width:641px) {
  .grid__col--1-4-m {
     width: 25%;
   } 
}
  
.grid__col--1-4-s {
  width:25%;
 }
 
.grid_col--end {
   margin-left: auto;
 }
 
.grid__col > input:nth-child(1) {
  width: 140px !important;
  height: 100px !important;
  position: absolute !important;
  opacity: 0 !important;
}
.grid__col > input:nth-child(1):checked+img+.icon-text {
  visibility: visible !important;
  display: block !important;
}
＆＃13; 
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <input type="radio" name="show-text"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 1</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
   <input type="radio" name="show-text"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 2</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
   <input type="radio" name="show-text"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 3</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Te 4'>
   <input type="radio" name="show-text"/>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 4</p>
   </div>
 </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

最简单的方法可能是使用媒体查询隐藏多个文本，就像在代码中一样（仅使用max-width:641px并修改display参数）。 / p>

除此之外，添加一个单独的p，使用相反的媒体查询，仅显示更宽的显示，并在javascript中动态控制其值。

const outputNode = document.querySelector('.icon-text--mobile');

const gridNodes = document.querySelectorAll('.grid__col');
const gridNodesArray = Array.prototype.slice.call(imageNodes);

gridNodesArray.forEach(function (node, index) {
  const nodeImage = node.querySelector('img');
  const nodeText = node.querySelector('p').innerText;

  nodeImage.addEventListener('click', function () {
    outputNode.innerText = nodeText;
  });
});

答案 3 :(得分：0)

您可以使用简单的jquery来完成此任务。

$('.grid__col').on('click',function(e){
var text = $(this).data('text');
$(this).find('p').text(text);
});
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px
  padding-left: 16px;
}

.icons-grid  {
  img {margin: 0 auto;}
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
 }
 
@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
   } 
 }
  
@media (min-width:641px) {
  .grid__col--1-4-m {
     width: 25%;
   } 
}
  
.grid__col--1-4-s {
  width:25%;
 }
 
.grid_col--end {
   margin-left: auto;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text"></p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text"></p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text"></p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Text 4'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text"></p>
   </div>
 </div>

答案 4 :(得分：0)

使用JavaScript，您可以

event.target.nextElementSibling.style.display = 'block';

单击图像时触发，以显示相邻文本。

或者您可以切换显示：

element.style.display = element.style.display === 'block' ? 'none' : 'block';  //element would be event.target.nextElementSibling


var images = document.getElementsByTagName("img");

for (var i=0, len=images.length, img; i<len; i++) {
  img = images[i];
  img.addEventListener("click", function(event) {
    var image = event.target.nextElementSibling;
    image.style.display = image.style.display === 'block' ? 'none' : 'block';
  });
}
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

.grid__col {
  padding-right: 16px
  padding-left: 16px;
}

.icons-grid  {
  img {margin: 0 auto;}
}

.icon-text {
  max-width: 200px;
  margin: 0 auto;
  display: none;
 }
 
@media (min-width:961px) {
  .grid__col--1-4-l {
    width: 25%;
   }
 }
  
@media (min-width:641px) {
  .grid__col--1-4-m {
     width: 25%;
   } 
}
  
.grid__col--1-4-s {
  width:25%;
 }
 
.grid_col--end {
   margin-left: auto;
 }
<div class="grid icons-grid ">
  <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text1' data-text='Text 1'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 1</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text2' data-text='Text 2'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 2</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s text3' data-text='Text3'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 3</p>
   </div>
   <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end text4' data-text='Te 4'>
    <img src='http://via.placeholder.com/140x100'>
    <p class="icon-text">Text 4</p>
   </div>
 </div>

答案 5 :(得分：0)

这是工作DEMO

这是JS代码： 

$(function() {
    //for mobile do this

  //Hide icon text on page load
  $('p.icon-text').hide();

  //On image click toggle display icon text
  $('img').click(function() {
    //alert('clicked');
    $(this).siblings('p.icon-text').toggle();
  });
})
相关问题
最新问题