Я смог использовать 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 форму на другой странице
Спасибо :)
Вы можете использовать массив как промежуточный шаг. Добавьте/удалите элементы в массив и напишите весь массив, используя '.html'. Для # 2 вы можете передавать данные между страницами - зависит от вашего языка: php, asp? – greener
Когда вы говорите «добавлено на другую страницу в форму», что именно вы имеете в виду? Вы имеете в виду другую страницу браузера? Если это так, загружается ли страница браузера в другое окно? Или он будет загружен в будущем? – jfriend00
вы можете использовать $. ('# Id'). SlideUp (0); чтобы мгновенно скрыть div, но пространство также «откроется». Я не знаю, что вы имеете в виду, добавляя к «другой странице» - если вы имеете в виду совершенно отдельную вкладку, без POSTing на самой новой странице ... idk, если это возможно. –