单击图像时更改动态文本 [英] Make a dynamic text change when clicking an image

问题描述

我有一排四个图像，每个图像下面都有一些文字.对于移动屏幕，由于每个图像都会变小，因此我希望文本消失并改成一行，但其中包含一些动态文本，因此该文本将根据活动(单击)的图像而变化，这意味着我现在将显示该文本仅在单击图像时.我怎样才能做到这一点?到目前为止，我有以下内容:

I have a row of four images, each image has some text below. For mobile screens, since each image will be smaller, I want the text to disappear and make one line instead that has some dynamic text so this text will change depending on the image that is active (clicked), meaning I now will show the text only if the image is clicked. How can I achieve this? I have the following so far:

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

<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>

推荐答案

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

The simplest way to do that would probably be to hide the multiple of texts using media-queries, just as you did in your code (only use max-width:641px and modify the display parameter).

除此之外，添加一个单独的 p ，并使用相反的媒体查询，该查询仅针对更宽的显示范围显示该内容，并使用javascript动态控制其值.

Aside from that, add a separate p, with an opposite media-query that shows it only for the wider displays, and in javascript dynamically control its value.

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

这篇关于单击图像时更改动态文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！