javascript - 如何根据单击的图像更改文本段落
问题描述
我正在尝试根据单击的内容更改图像和段落。目前,图像会根据点击的内容进行更改,而不是段落。我在使文本与图像相对应时遇到了一些麻烦。我是编程新手,所以如果你们有任何帮助的想法。谢谢,如果你们需要更多信息,请告诉我。
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgParagraph = document.getElementById('img-paragraph');
expandImg.src = imgs.src;
// use 'display:table-cell' to keep elements side-by-side
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
}
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody{
background-color: #EEF0FC;
height:5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg{
width:20%;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 200px;
width: 60%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
float:right;
right:30px;
top:120px;
}
#expanded-wrapper{
width:100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 600px;
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<title>Projects</title>
</head>
<body class= 'totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph">image paragraph content goes here</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>
</body>
</html>
解决方案
让我们为每个名为 的图像添加一个自定义属性parag
,然后我们可以使用此属性的值设置为img-paragraph
:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
var imgParagraph = document.getElementById('img-paragraph');
imgParagraph.innerHTML = imgs.getAttribute("parag");
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
}
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody {
background-color: #EEF0FC;
height: 5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
width: 20%;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 200px;
width: 60%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 600px;
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}
<body class='totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph">image paragraph content goes here</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" parag="Parapraph #1" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897"
alt="Snow" style="width:100%" parag="Parapraph #2" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" parag="Parapraph #3" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" parag="Parapraph #4" onclick="myFunction(this);">
</div>
</div>
</body>
推荐阅读
- c# - 如何根据其他 ViewModel 中设置的设置动态更新一个 ViewModel 中的属性?
- java - 列表视图中的滚动条
- java - 如果需要用户输入整数,如何处理无效输入?
- javascript - 特征表关系
- react-native - 使用 Turtle CLI“未从打包程序加载捆绑包”构建独立 Expo .apk
- c++ - 将二叉搜索树转换为模板类
- python - 在 Mac OS Catalina 中安装 PyQT 4
- excel - 将excel查询复制到power bi
- python - 按键分组并使用自定义条件进行聚合
- laravel - Laravel:使用 Passport 在 api 控制器中获取用户 ID