Добавить и сохранить текст для изображения

-1

Я хочу создать страницу, где есть несколько изображений вместе с кнопкой. Когда вы нажмете на определенную кнопку, появится текстовое поле, где вы можете добавить описание abuot изображения. Script Пример:Добавить и сохранить текст для изображения

я нажал на изображение Кнопка
Я написал описание изображения А
сейчас, я нажал на кнопку изображение B.
описание изображения B будет Dispaly (описание изображения А не появляется)
Опять же, я нажал на изображении кнопки, описание изображения А будет Dispaly Конечно, может быть несколько фотографий, вы можете добавить изображения.

Я новый студент в 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

Хороший набор требований. Что вы пробовали? –

Вы можете начать с создания его :) Сначала сделайте HTML и CSS, затем попробуйте добавить функциональность позже. – denisol

Вы пытаетесь поймать с $('#bescription') текстовое поле - но bescription (предполагается быть описанием, верно?) является класс, а переключатель # предназначен для идентификатора. Либо измените jQuery на $('.bescription'), либо измените класс на идентификатор в HTML <textarea id="bescription"></textarea>

источник

2014-09-02 18:07:38 yuvi

Добавить и сохранить текст для изображения

ответ

Смежные вопросы