Javascript 添加并保存图像的文字说明
我想创建一个页面，其中有几个图像和一个按钮。 单击特定按钮时，将出现一个文本区域，您可以在其中添加有关图像的说明。 脚本示例：Javascript 添加并保存图像的文字说明,javascript,jquery,html,image,Javascript,Jquery,Html,Image,我想创建一个页面，其中有几个图像和一个按钮。 单击特定按钮时，将出现一个文本区域，您可以在其中添加有关图像的说明。 脚本示例： 我点击了一个按钮 我写了一个关于这张照片的描述 现在，我点击了图片B按钮 将显示图像B的说明（图像A的说明不显示） 再次，我点击了图像A按钮，图像A的描述将显示出来 当然，可以有几个图片，你可以添加图片 我是html、jquery等方面的新手，我真的不知道如何开始这项任务。 我感谢你的帮助 我从以下代码开始： HTML: 身体{ 背景色：#e0ebb； } h1{
- 我点击了一个按钮
- 我写了一个关于这张照片的描述
- 现在，我点击了图片B按钮
- 将显示图像B的说明（图像A的说明不显示）
- 再次，我点击了图像A按钮，图像A的描述将显示出来 当然，可以有几个图片，你可以添加图片
身体{
背景色：#e0ebb；
}
h1{
颜色：橙色；
文本对齐：居中；
}
输入[type=“text”]{
高度：30px；
宽度：400px；
填充：10px；
右边距：10px；
边缘底部：20px；
字体大小：15px；
边界半径：5px；
}
输入[type=“submit”]{
高度：30px；
字体大小：15px；
光标：指针；
}
画廊
$（函数（）{
$（“#添加”）。在（'单击'，添加列表项）；
$（文档）.on（'单击'，'.show'，显示说明）；
});
函数addListItem（）{
如果（$（“#新文本”）.val（）！=''）{
var text=$（“#新文本”）.val（）；
$（“#imagelist”）。追加（“”）；
$（“#新文本”）.val（“”）；
}
}
函数showDescription（）{
$（'#bescription'）.val（'write bescription'）；
}
$（'bescription'）bescription$（'bescription'））<html>
<head>
<script src="index.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
background-color: #E0EBEB;
}
h1 {
color: orange;
text-align: center;
}
input[type="text"] {
height: 30px;
width: 400px;
padding: 10px;
margin-right: 10px;
margin-bottom: 20px;
font-size: 15px;
border-radius: 5px;
}
input[type="submit"]{
height: 30px;
font-size: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1><b>Gallery</b></h1>
<input type="text" id="new-text" placeholder="enter URL">
<input type="submit" id="add" value="Add"><br/>
<textarea class="bescription"></textarea>
<ul id="imagelist">
<li><input type="image" class="show" src="http://oferflowerstelaviv.files.wordpress.com/2011/05/0131.jpg" alt="Roses" width="150" height="150"></li>
</ul>
</div>
</body>
</html>
$(function() {
$("#add").on('click', addListItem);
$(document).on('click', '.show', showDescription);
});
function addListItem() {
if ($("#new-text").val() !== '') {
var text = $("#new-text").val();
$('#imagelist').append('<li><input type="image" src="' + text + '" width="150" height="150"></li>');
$("#new-text").val('');
}
}
function showDescription(){
$('#bescription').val('write bescription');
}