在我们的电子商务系统和 POS 系统之间进行了付费集成后,我的在线商店现在按字母/时间顺序显示尺寸。例如。
L | M | S | XL
而不是S | M | L | XL
和
7 | 7 1/2 | 7 1/4 | 7 1/8 | 7 3/8
这是因为尺寸属性/选项现在是从 POS 系统中提取的,并且对于每个产品都是独一无二的(我知道这很愚蠢,但这就是集成的工作方式)。这意味着无法手动选择它们出现的顺序,因为这将需要数千次手动更改,这违背了集成的目的。
我想出了一个 jQuery 解决方案,但遇到了一些问题。我已将此应用于数字和字母大小,并且有同样的问题。
$(".Value li:contains('XL')").insertBefore($(".Value li:contains('XXL')"));
$(".Value li:contains('L')").insertBefore($(".Value li:contains('XL')"));
$(".Value li:contains('M')").insertBefore($(".Value li:contains('L')"));
$(".Value li:contains('S')").insertBefore($(".Value li:contains('M')"));
$(".Value li:contains('XS')").insertBefore($(".Value li:contains('S')"));
这可以正常工作,直到您获得具有姐妹值的单个字符值。换句话说,该代码将 LMS 重新排列为 SML 就好了,但是如果存在 XS 或 XL,或者在数字大小下降到一位数的情况下,它就会遇到问题。例如,如果有 7 1/4、7 1/8 等,则为 7。这显然是因为 .contains() 函数。
我曾尝试使用 .filter() 但我无法让它选择我想要的元素,更不用说 .insertBefore
谢谢。
根据要求使用 HTML 进行编辑:
<div class="Value">
<ul>
<li>
<label><input name="variation[1]" type="radio" class="RadioButton" value="5429" /> XL</label>
</li> <li>
<label><input name="variation[1]" type="radio" class="RadioButton" value="5430" /> 2XL</label>
</li> <li>
<label><input name="variation[1]" type="radio" class="RadioButton" value="5431" /> M</label>
</li> <li>
<label><input name="variation[1]" type="radio" class="RadioButton" value="5432" /> L</label>
</li> <li>
<label><input name="variation[1]" type="radio" class="RadioButton" value="5433" /> S</label>
</li>
</ul>
</div>
编辑 2
从上面的 HTML 和我刚刚意识到的内容可以看出 - 它不是按标签(大小)的字母/时间顺序显示,而是按时间顺序显示单选按钮值。如前所述,这是在从我们的 POS 导入产品时由购物车动态生成的。