Не получается переопределить позиционирование с помощью скрипта
Всем привет. Есть магазин и секция с двумя товарами: один статический, второй вариативный. Цену на товары абсолютно позиционирую внутри контейнера в зависимости от содержимого. Содержимое кода товаров во многом совпадают, но для статического товара высоту скрипт переопределяет все верно, а для динамического переопределения не происходит. наглядно это можно видеть в <a href="http://jsfiddle.net/ddupm8d8/1/">fiddle</a> В чем подвох?
|
Думается скрипт устанавливает позицию один раз при загрузке страницы потому так и выходит. Надо вам добавить в функцию динамической подгрузки, в конец, вызов той функции, что отвечает за позиционирование, чтоб она каждый раз считала заново.
P.S. Однако позиционировать элементы надо с помощью css, без всяких скриптов, тем более в такой банальной ситуации. Скрипты для простой вёрстки - это путь в ад.:) |
Цитата:
надеюсь, вы понимаете, что магазин работает на движке с туевой кучей функций и скриптов и я код упростил раз в 10, чтобы воспроизвести проблему? так а в чем собственно принципиальная разница, когда товар простой и вариативный, когда в первом случае все подгружается верно, а во втором нет? и как с динамическим контентом разной высоты можно работать с помощью css в данном случае? Цитата:
|
Aetae Есть в интернет-магазине форма, которая устанавливает стоимость товара в зависимости от выбранных пользователем атрибутов.
Мне нужно обратиться к блоку с классом price и поменять его месторасположение (в зависимости от условия). Проблема в том, что если смотреть через консоль, то видно, что <span class="price"><span class="amount">260.000 руб.</span> формируется через атрибут data-product_variations самой формы, т.е. блок, в котором он формируется <div class="single_variation"></div> - пустой, а если смотреть html-код страницы, то он там есть. Вопрос: как обратиться мне к блоку с классом .price, чтобы в дальнейшем с ним манипулировать? Как вы могли заметить - такой строчкой $this.find('.price') этого не получается сделать. $('.product-frame').each(function() { var $this = $(this); var variations_form = $this.find('.variations_form'); console.log(variations_form.html()); $this.find('.price').css("top", (height + 32) + "px"); } }); <!-- То, что видно в скрипте через консоль--> <div class="product-frame"> <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3351" data-product_variations="[{"variation_id":3354,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":260000,"display_regular_price":260000,"attributes":{"attribute_pa_size":"large"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">260.000 руб.<\/span><\/span>","availability_html":"","sku":"PS101-1","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"},{"variation_id":3355,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":160000,"display_regular_price":160000,"attributes":{"attribute_pa_size":"medium"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">160.000 руб.<\/span><\/span>","availability_html":"","sku":"PS101-2","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"},{"variation_id":3356,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":80000,"display_regular_price":80000,"attributes":{"attribute_pa_size":"small"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">80.000 руб.<\/span><\/span>","availability_html":"","sku":"PS101-3","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"}]"> <div class="single_variation"></div> </form> </div> <!-- Итог --> <div class="product-frame"> <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3351" data-product_variations=".."> <div class="single_variation"><span class="price"><span class="amount">260.000 руб.</span></span> </div> </div> </form> .product-frame { position: relative; } .product-frame .price { position: absolute; top: 379px; left: 10px; } |
Часовой пояс GMT +3, время: 05:21. |