Question

我想创建一个页面，其中有几个图像和一个按钮。单击特定按钮时，将显示textarea，您可以在其中添加有关图像的说明。脚本示例：

我点击了图片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');
}

Answer 1

您尝试使用$('#bescription')抓住textarea - 但bescription（应该是描述，对吗？）是类和{{1选择器用于ID。将jQuery更改为#或将类更改为HTML中的ID $('.bescription')

添加并保存图像的文本说明

1 个答案: