單擊圖像時進行動態文本更改

Question

我有一排四個圖像，每個圖像下面都有一些文字。對於手機屏幕，由於每張圖片都會更小，我希望文字消失並製作一行代替文字的動態文字，因此此文字將根據活動（點擊）圖片而變化，這意味着我現在將顯示文字只有當圖像被點擊時。我怎樣才能做到這一點？我見到目前爲止如下：

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

Answer 1

這樣做很可能會使用媒體查詢隱藏文本的多，就像你在你的代碼做的最簡單的方法（只使用max-width:641px並修改參數display）。

除此之外，添加一個單獨的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; 
    }); 
}); 

Answer 2

你可以用簡單的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>

Answer 3

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>

Answer 4

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

Answer 5

這裏是工作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(); 
    }); 
}) 

Answer 6

你可以在沒有使用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，所以我們想要的透明覆選框的樣式就在那裏。

.grid__col > input:nth-child(1):checked+img+.icon-text是告訴瀏覽器，如果我的期望checkbox是checked那麼樣式應用到一個元素與類名.icon-text是相鄰的元素img這是一個還靠近檢查checkbox。

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

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

編輯

比方說，你想一個.icon-text出現（那其他的人，當你點擊另一個圖像消失）。 如果你想用相同的技術做到這一點，那麼你唯一需要做的就是將input的類型改爲radio，並用「show-text」或別的名稱將它們鏈接起來。 <input type="checkbox"/>至<input type="radio" name="show-text"/>。沒有必要改變CSS。

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

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