当css条件为true时,我正在使用jquery代码重新排序div元素, div根据屏幕大小重新排序。重新排序工作正常,问题是当屏幕变为原始大小时重新排序回原始大小,然后它变得混乱(例如重复字段)并且无法正确显示。
//use for @media only screen and (max-width: 767px) detection
$(window).resize(function(){
if ($('#mobile-view').css('visibility') === 'hidden') {
$("#product-gallery").insertAfter("#product-info");
}
else {
$("#product-info").insertAfter("#product-gallery");
}
});
获得重复的HTML代码部分(选择框)
div class="productoptions section">
{% if product.variants.size > 1 %}
<div>
<label for="product-select">
{% if product.options.size == 1 %}
{{ product.options.first }}
{% else %}
Options
{% endif %}
</label>
<span class="styleddrop">
<select id="product-select" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</span>
</div>
{% assign current_product = product %}
{% include 'product-dropdown-js' with 'product-info' %}
{% else %}
<p>
{% if product.options.size == 1 %}
{{ product.options.first }}:
{% else %}
Option:
{% endif %}
{{ product.variants.first.title }}
</p>
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% endif %}
<div>