添加並保存圖像的文本描述

-1

我想創建一個頁面，其中有幾個圖像以及一個按鈕。當你點擊一個特定的按鈕時，會出現一個textarea，你可以在其中添加描述。腳本實例：添加並保存圖像的文本描述

我點擊圖像的按鈕
我寫的圖像A
的描述現在，我點擊圖像B按鈕。圖像B的
描述選項將顯示（圖像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'); 
}

來源

2014-09-01 shamira

好的一組要求。你嘗試了什麼？ – 2014-09-01 17:16:30

您可以先創建它:)首先執行HTML和CSS，然後再嘗試添加功能。 – denisol 2014-09-01 17:17:39

你試圖趕上textarea的與$('#bescription') - 但bescription（應該是說明吧？）是類和#選擇器是爲一個ID。將jQuery更改爲$('.bescription')或者將該類更改爲HTML中的ID <textarea id="bescription"></textarea>

來源

2014-09-02 18:07:38 yuvi

添加並保存圖像的文本描述

回答

相關問題