Передача данных из карточки в popup форму
Есть карточки товаров, грубо выглядят так:
<div class="cart" id="1">
<h3>Пицца пепперони</h3>
<img src="1.png" height="150px">
<p class="desc">Состав пиццы</p>
<p class="selects">
<span class="ves">450 гр.</span>
<span class="testo">
<b>Размер:</b> M
</span>
</p>
<p class="cena">500 руб.</p>
<div class="order-form-go btn">Заказать</div>
</div>
<div class="cart" id="2">
<h3>Пицца Маргарита</h3>
<img src="2.png" height="150px">
<p class="desc">Состав пиццы 2</p>
<p class="selects">
<span class="ves">320 гр.</span>
<span class="testo">
<b>Размер:</b> S
</span>
</p>
<p class="cena">370 руб.</p>
<div class="order-form-go btn">Заказать</div>
</div>
есть попап форма в которую должны передаваться данные выбранной пиццы по клику на кнопку "Заказать":
<div id="modal-form">
<span id="modal_close">X</span>
<form action="" method="post">
<h3>Оформление заказа</h3>
<hr>
<h4>Название товара</h4>
<img src="картинка карточки" height="50px" align="left">
<br>
<p>описание карточки</p>
<p>
<span>
<b>Вес:</b> ? гр.
</span>
<span>
<b>Размер:</b> ?
</span>
</p>
<p>
<b>Цена:</b> ? руб.
</p>
<input name="order_go" type="submit" value="ОТПРАВИТЬ">
</form>
</div>
<div id="overlay"></div><!-- Пoдлoжкa -->
Скрипт показа/скрытия попапа:
<script>
$(document).ready(function() {
$('div.order-form-go').click( function(event){
event.preventDefault(); // выключaем стaндaртную рoль элементa
$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
function(){ // пoсле выпoлнения предъидущей aнимaции
$('#modal-form')
.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
.animate({opacity: 1}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
});
});
/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
$('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
$('#modal-form')
.animate({opacity: 0}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
}
);
});
});
</script>
Вывод попапа сделал, но не знаю как динамически передать данные из карточки в попап, помогите решить проблемку. |
$(document).ready(function() {
$('div.order-form-go').click( function(event){
$('#modal-form h4').text($(this).siblings('h3').text());
.... итд
|
Вот написал я:
$(document).ready(function() {
$('div.order-form-go').click( function(event){
$('#modal-form h4').text($(this).siblings('h3').text());
});
});
И никакого действия нет |
Код выше работает! А как быть если нужно взять текст элемента который не sibling с div.order-form-go?
|
desperate_one,
обьект с данными лучше, чем парсить html. |
Ну к примеру:
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="receiver">text</div>
Как сделать, чтоб при клике на btns, в блок receiver выводился текст из div.header h3? |
desperate_one,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.btns').click( function(event){
event.preventDefault();
$('#receiver').text($(this).siblings('.parent').find('h3').text())
})
})
</script>
</head>
<body>
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text1</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text2</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="root_parent">
<div class="parent">
<div class="header">
<h3>Text3</h3>
</div>
</div>
<div class="btns">
<button></button>
</div>
</div>
<div id="receiver">text</div>
</body>
</html>
|
а если при клике на button?
|
Я просто не так изложил вложенность, у меня такое дерево:
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>динамический текст</li>
<li>
<ul>
<li></li>
<li></li>
<li>динамическая кнопка</li>
</ul>
</li>
</ul>
<p>Область вывода</p> И в таком случае если нужно взять ДИНАМИЧЕСКИЙ ТЕКСТ при нажатии на ДИНАМИЧЕСКУЮ КНОПКУ и вывести его в ОБЛАСТЬ ВЫВОДА, они же не на одном уровне находятся, то как взять значение? |
desperate_one,
$(document).ready(function() {
$('.btns button').click( function(event){
event.preventDefault();
$('#receiver').text($(this).parent().siblings('.parent').find('h3').text())
})
})
|
Цитата:
Цитата:
|
desperate_one,
обьект с данными + шаблон карточки + шаблон формы и всё |
А если у всех объектов только классы и все они одинаковые?
|
<div class="pos left" itemscope="" itemtype="http://schema.org/Product" data-subcat="" data-id="3" data-price="470" style="margin-left: 37px;">
<div class="posImg">
<div class="posImg_hover"> </div>
<img itemprop="image" src="http://hub.loc/images/catalog/pizza_3247.png" data-big="http://hub.loc/images/catalog/pizza_3247.png" class="cboxElement">
</div>
<div class="posName myRed posBottom">
<table>
<tbody><tr>
<td valign="middle" itemprope="name">
<a class="myRed cart-name">Мега пепперони</a>
</td>
</tr>
</tbody></table>
</div>
<div class="ingrids posBottom" itemprop="description">
<span>КОЛБАСА ПЕППЕРОНИ, СЫР МОЦАРЕЛЛА, ФИРМЕННЫЙ СОУС</span>
</div>
<div class="infovalues posBottom">
<span class="weight left">вес: <b>510</b> гр.</span>
</div>
<div class="attribute posBottom">
<label class="selDiam">Выбор диаметра: </label>
<div class="form-radios">
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="480" data-weight1="360" data-price2="360" data-price1="360" data-diam="S">S</span>
<br>
<span class="diameter-price">360 руб</span>
</label>
</div>
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="640" data-weight1="510" data-price2="470" data-price1="470" data-diam="M">M</span>
<br>
<span class="diameter-price">470 руб</span>
</label>
</div>
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="1010" data-weight1="710" data-price2="670" data-price1="670" data-diam="L">L</span>
<br>
<span class="diameter-price">670 руб</span>
</label>
</div>
</div>
</div>
<div class="selects">
<div class="form-item">
<label class="l">количество:</label>
<select class="l" name="amount">
<option class="colvo-sel" value="1">1 шт.</option>
<option class="colvo-sel" value="2">2 шт.</option>
<option class="colvo-sel" value="3">3 шт.</option>
<option class="colvo-sel" value="4">4 шт.</option>
<option class="colvo-sel" value="5">5 шт.</option>
<option class="colvo-sel" value="6">6 шт.</option>
<option class="colvo-sel" value="7">7 шт.</option>
<option class="colvo-sel" value="8">8 шт.</option>
<option class="colvo-sel" value="9">9 шт.</option>
<option class="colvo-sel" value="10">10 шт.</option>
</select>
</div>
<div class="form-item">
<label class="">тесто: </label>
<select name="daugh" class="form-select">
<option value="2">пышное</option>
<option value="1">тонкое</option>
</select>
</div>
</div>
<div class="btnTocart" style="padding-top: 0.557982px;">
<center>
<div class="tocart" data-id="1100" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" style="user-select: none;">
<div class="leftBtn btn left"> </div>
<div class="centerBtn btn left redshdw pizz-cena">
<b>470</b> руб.
</div>
<div class="order-form-go seccenterBtn btn left yelshdw">
<b>ЗАКАЗАТЬ</b>
</div>
<div class="rightBtnYel btn left"> </div>
<meta itemprop="price" content="470">
<meta itemprop="priceCurrency" content="RUB">
<link itemprop="availability" href="http://schema.org/InStock">
</div>
</center>
</div>
</div>
Вот карточка целиком, из неё нужно взять название, размер, тесто, кол-во и цену. |
Цитата:
|
desperate_one,
далее сами
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.pos').on('click', '.order-form-go', function(event){
event.preventDefault();
var block = event.delegateTarget;
var title = $('.cart-name', block).text();
var data = $('.diameter-size:eq(1)', block).data();// $('.diameter-size.active', block).data;
var diam = data.diam;
var daugh = $('[name="daugh"]', block).val();
var price = data['price'+daugh];
var amount = $('[name="amount"]', block).val();
alert([title, diam, daugh, amount, price]); // название, размер, тесто, кол-во и цену.
})
})
</script>
</head>
<body>
<div class="pos left" itemscope="" itemtype="http://schema.org/Product" data-subcat="" data-id="3" data-price="470" style="margin-left: 37px;">
<div class="posImg">
<div class="posImg_hover"> </div>
<img itemprop="image" src="http://hub.loc/images/catalog/pizza_3247.png" data-big="http://hub.loc/images/catalog/pizza_3247.png" class="cboxElement">
</div>
<div class="posName myRed posBottom">
<table>
<tbody><tr>
<td valign="middle" itemprope="name">
<a class="myRed cart-name">Мега пепперони</a>
</td>
</tr>
</tbody></table>
</div>
<div class="ingrids posBottom" itemprop="description">
<span>КОЛБАСА ПЕППЕРОНИ, СЫР МОЦАРЕЛЛА, ФИРМЕННЫЙ СОУС</span>
</div>
<div class="infovalues posBottom">
<span class="weight left">вес: <b>510</b> гр.</span>
</div>
<div class="attribute posBottom">
<label class="selDiam">Выбор диаметра: </label>
<div class="form-radios">
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="480" data-weight1="360" data-price2="360" data-price1="360" data-diam="S">S</span>
<br>
<span class="diameter-price">360 руб</span>
</label>
</div>
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="640" data-weight1="510" data-price2="470" data-price1="470" data-diam="M">M</span>
<br>
<span class="diameter-price">470 руб</span>
</label>
</div>
<div class="form-item ">
<label class="option ">
<span class="diameter-size" data-weight2="1010" data-weight1="710" data-price2="670" data-price1="670" data-diam="L">L</span>
<br>
<span class="diameter-price">670 руб</span>
</label>
</div>
</div>
</div>
<div class="selects">
<div class="form-item">
<label class="l">количество:</label>
<select class="l" name="amount">
<option class="colvo-sel" value="1">1 шт.</option>
<option class="colvo-sel" value="2">2 шт.</option>
<option class="colvo-sel" value="3">3 шт.</option>
<option class="colvo-sel" value="4">4 шт.</option>
<option class="colvo-sel" value="5">5 шт.</option>
<option class="colvo-sel" value="6">6 шт.</option>
<option class="colvo-sel" value="7">7 шт.</option>
<option class="colvo-sel" value="8">8 шт.</option>
<option class="colvo-sel" value="9">9 шт.</option>
<option class="colvo-sel" value="10">10 шт.</option>
</select>
</div>
<div class="form-item">
<label class="">тесто: </label>
<select name="daugh" class="form-select">
<option value="2">пышное</option>
<option value="1">тонкое</option>
</select>
</div>
</div>
<div class="btnTocart" style="padding-top: 0.557982px;">
<center>
<div class="tocart" data-id="1100" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" style="user-select: none;">
<div class="leftBtn btn left"> </div>
<div class="centerBtn btn left redshdw pizz-cena">
<b>470</b> руб.
</div>
<div class="order-form-go seccenterBtn btn left yelshdw">
<b>ЗАКАЗАТЬ</b>
</div>
<div class="rightBtnYel btn left"> </div>
<meta itemprop="price" content="470">
<meta itemprop="priceCurrency" content="RUB">
<link itemprop="availability" href="http://schema.org/InStock">
</div>
</center>
</div>
</div>
</body>
</html>
|
Идеально! Огромнейшее спасибо
|
| Часовой пояс GMT +3, время: 16:46. |