添加并保存图像的文本描述

Add and save text description for an image

本文关键字：文本 描述 图像 保存 添加      更新时间：2023-09-26

我想创建一个页面，其中有几个图像和一个按钮。当你点击一个特定的按钮时，会出现一个文本区域，你可以在其中添加关于图像的描述。脚本示例：

  • 我点击了图片A按钮
  • 我写了图片a的描述
  • 现在，我点击了图片B按钮
  • 将显示图像B的描述（不显示图像A的描述）
  • 再次，我点击了图像A按钮，将显示图像A的描述当然，可以有几个图片，你可以添加图片

我是html、jquery等专业的新生，我真的不知道如何开始这项任务。我很感激你的帮助。

我从以下代码开始：

HTML:

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

JS:

$(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');
}

您正试图用$('#bescription')捕获文本区域，但bescription（应该是描述，对吧？）是一个类，#选择器用于ID。将jQuery更改为$('.bescription')，或在HTML <textarea id="bescription"></textarea> 中将该类更改为ID

相关文章：