Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Как можно управлять позиционированием элементов формы после ее загрузки?

Тема в разделе "Вопросы, советы и доработки.", создана пользователем vasja, 31 июл 2015.

  1. vasja

    vasja

    Сообщения:
    167
    Симпатии:
    4
    Баллы:
    18
    Всем привет. есть магазин с вариативными товарами. подскажите, как можно управлять позиционированием элементов формы (с атрибутами товаров различных вариаций для вывода) после ее загрузки? условие скриптов не выполняется..
     
  2. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Позиционированием элементов управляют с помощью стилей.
    Динамически изменять стили можно с помощью JavaScript-а.
     
  3. vasja

    vasja

    Сообщения:
    167
    Симпатии:
    4
    Баллы:
    18
    searchingman вы не внимательны - я писал: "условие скриптов не выполняется.." = динамически стили менять не удается, из-за того, что все атрибуты для тегов прописываются в параметрах формы. вот и спрашиваю - как их оттуда извлечь и далее с ними взаимодействовать?
     
  4. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Какие условия?
    Приводите код условий JavaScript и давайте ссылку на страницу с вашим скриптом.
     
  5. vasja

    vasja

    Сообщения:
    167
    Симпатии:
    4
    Баллы:
    18
    Есть в интернет-магазине форма, которая устанавливает стоимость товара в зависимости от выбранных пользователем атрибутов. Мне нужно обратиться к блоку с классом price и поменять его месторасположение (в зависимости от условия). Проблема в том, что если смотреть через консоль, то видно, что <span class="price"><span class="amount">260.000&nbsp;руб.</span> формируется через атрибут data-product_variations самой формы, т.е. блок, в котором он формируется <div class="single_variation"></div> - пустой, а если смотреть html-код страницы, то он там есть. Вопрос: как обратиться мне к блоку с классом .price, чтобы в дальнейшем с ним манипулировать? Как вы могли заметить - такой строчкой $this.find('.price') этого не получается сделать.

    HTML:
    <!-- То, что видно в скрипте через консоль-->
    <div class="product-frame">
      <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3351" data-product_variations="[{&quot;variation_id&quot;:3354,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:260000,&quot;display_regular_price&quot;:260000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;large&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>260.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-1&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;},{&quot;variation_id&quot;:3355,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:160000,&quot;display_regular_price&quot;:160000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;medium&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>160.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-2&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;},{&quot;variation_id&quot;:3356,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:80000,&quot;display_regular_price&quot;:80000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;small&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>80.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-3&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;}]">
    
        <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&nbsp;руб.</span></span>
        </div>
    </div>
    </form>
    Код:
    $('.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");
        }
        });
    Код:
    .product-frame {
      position: relative;
    }
    .product-frame .price {
      position: absolute;
      top: 379px;
      left: 10px;
    }
     
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Как можно подсказать без отладчика в браузере?
    Возможно у Вас скрипты конфликтуют между собой или стили из других файлов перекрывают друг друга?
    Или еще +100500 других причин.

    Вот поэтому просят ссылку на "проблемную" страницу, чтобы было от чего-то оттолкнуться.

    Поэтому или давайте ссылку или жмите <F12> в браузере и отлаживайте сами свой код. ;)
     
  7. vasja

    vasja

    Сообщения:
    167
    Симпатии:
    4
    Баллы:
    18
    ответил в лс