2013-10-09 4 views
0

Я смог использовать JSfiddle для создания события appendTo. Нажимая на изображение, я могу получить заголовок для тех изображений, которые были напечатаны в списке в другом div. Но что, если бы я хотел, чтобы это было добавлено на другую страницу в форму?appendДля формы на другой странице?

Также, как удалить элемент после его добавления? Код, который у меня есть, позволяет мне appendTo, но я не знаю, как отменить это событие ... любые предложения?

Вот JS скрипку: http://jsfiddle.net/jhyqt5/cBsqN/20/

и код:

HTML

<div class="wrapper"> 
    <div class="caption">Blueberry</div> 
    <img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-prn2/1394351_529524313783586_609777864_n.jpg" class="img-circle"> 
</div> 

<div class="wrapper"> 
    <div class="caption">Walnuts</div> 
    <img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/1377244_529524413783576_249384396_n.jpg" class="img-circle"> 
</div> 

<div class="wrapper"> 
    <div class="caption">Craisins</div> 
    <img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/1378714_529524353783582_129148654_n.jpg" class="img-circle"> 
</div> 
    <br> 
     <br> 
<div class="foodlist"> 

</div> 

CSS

.img-circle { 
    border-radius: 50%; 
    height: 140px; 
    width: 140px; 
} 
.wrapper { 
    position: relative; 
} 
.caption { 
    background-color: black; 
    opacity: .7; 
    text-align: center; 
    line-height: 120px; 
    color: white; 
    position: absolute; 
    display: none; 
    border-radius: 50%; 
    width: 140px; 
    height: 140px; 
} 
.wrapper:hover .caption { 
    display: block; 
} 
.wrapper.active .caption { 
    display: block; 
    opacity: .8; 
    background: #38ACD5; 
} 

JS

$('.wrapper').on('click', function() { 
    $(this).toggleClass('active'); 
    var caption = $(this).find(".caption").text(); 
    $("<li>" + caption + "</li>").appendTo("div.foodlist"); 
}); 

Bottomline:

1) appendTo и Undo функция 2) appendTo форму на другой странице

Спасибо :)

+0

Вы можете использовать массив как промежуточный шаг. Добавьте/удалите элементы в массив и напишите весь массив, используя '.html'. Для # 2 вы можете передавать данные между страницами - зависит от вашего языка: php, asp? – greener

+0

Когда вы говорите «добавлено на другую страницу в форму», что именно вы имеете в виду? Вы имеете в виду другую страницу браузера? Если это так, загружается ли страница браузера в другое окно? Или он будет загружен в будущем? – jfriend00

+0

вы можете использовать $. ('# Id'). SlideUp (0); чтобы мгновенно скрыть div, но пространство также «откроется». Я не знаю, что вы имеете в виду, добавляя к «другой странице» - если вы имеете в виду совершенно отдельную вкладку, без POSTing на самой новой странице ... idk, если это возможно. –

ответ

1

Вы не можете изменить страницу, которая будет загружена где-то в будущее. Эта страница еще не существует.

Все, что вы можете сделать, это установить какое-либо состояние (в браузере, в локальном хранилище браузера или на сервере), чтобы код javascript на этой другой странице мог проверять, а затем изменять эту другую страницу при ее загрузке.