Форум

desperate_one · #1 (**permalink**) 14.08.2018, 14:07

Есть карточки товаров, грубо выглядят так:

<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>

Вывод попапа сделал, но не знаю как динамически передать данные из карточки в попап, помогите решить проблемку.

j0hnik · #2 (**permalink**) 14.08.2018, 14:30

$(document).ready(function() {
  $('div.order-form-go').click( function(event){
      $('#modal-form h4').text($(this).siblings('h3').text());
.... итд

desperate_one · #3 (**permalink**) 14.08.2018, 18:10

Вот написал я:

$(document).ready(function() {
  $('div.order-form-go').click( function(event){
      $('#modal-form h4').text($(this).siblings('h3').text());
  });
});

И никакого действия нет

desperate_one · #4 (**permalink**) 14.08.2018, 18:25

Код выше работает! А как быть если нужно взять текст элемента который не sibling с div.order-form-go?

рони · #5 (**permalink**) 14.08.2018, 19:15

desperate_one,
обьект с данными лучше, чем парсить html.

desperate_one · #6 (**permalink**) 14.08.2018, 19:31

Ну к примеру:

<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?

рони · #7 (**permalink**) 14.08.2018, 19:40

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>

desperate_one · #8 (**permalink**) 14.08.2018, 19:50

а если при клике на button?

desperate_one · #9 (**permalink**) 14.08.2018, 19:57

Я просто не так изложил вложенность, у меня такое дерево:

<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>

И в таком случае если нужно взять ДИНАМИЧЕСКИЙ ТЕКСТ при нажатии на ДИНАМИЧЕСКУЮ КНОПКУ и вывести его в ОБЛАСТЬ ВЫВОДА, они же не на одном уровне находятся, то как взять значение?

рони · #10 (**permalink**) 14.08.2018, 19:57

desperate_one,

$(document).ready(function() {
	$('.btns button').click( function(event){
		event.preventDefault();
    $('#receiver').text($(this).parent().siblings('.parent').find('h3').text())
        })
     })

Форум

Справочник

Discord чат

Курсы javascript