javascript - 仅在 Google Chrome 上出现 jQuery slider 不透明度错误

Question

我在 Magento 网站上有一个自定义的 slider 。它 react 灵敏，并具有自定义触摸行为。行为应如下所示:

1. 三个图片 slider ，中间的不透明度应该是 1.0，其余的只有 0.15
2. 在较小的分辨率下，仅显示 2 张图片。右侧的不透明度应为 1.0，左侧图像的不透明度应为 0.15
3. 在移动设备上显示 1 张图片。当前显示的图像的不透明度应为 1.0。

我让它与 CSS/jQuery 混合使用。

HTML

<ul class="more-views">
<li><a href="someURL"><img src=..... /></li>
<li class="active"><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
</ul>

CSS.more-views ul li { 不透明度:.15; }.more-views ul li.active { 不透明度:1.0;

脚本很长，您可能想要检查元素。但想法如下。当您单击 NEXT 箭头时，列表的第一个元素被复制，附加到 的后面并从第一个位置开始销毁。稍后事件类被删除并添加到第二个 <li>在列表中。像这样

<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
</ul>

第一步

<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>

第 2 步

<ul>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>

第 3 步

<ul>
<li class="elem2"></li>
<li class="elem3 active"></li>
<li class="elem4"></li>
<li class="elem1"></li>
</ul>

目前的小问题如下:1. 如果您单击向右箭头(下一个箭头)一次，列表中的第一个元素将保持不透明度为 1.0(仅在 Chrome 上)。2. 如果你检查元素是说它有 0.15 的不透明度3. 如果调整浏览器大小，您会看到不透明度再次设置为 .154. 如果您在 Firebug 中启用/禁用不透明度，它会正常工作。5. 如果您在下一个箭头上单击 2 次，不透明度错误就会消失。

您可以在此处查看现场示例: http://www.mackage.com/ca/en/jeffrey-black-leather-jacket

Answer 1

从 site.css 的第 298 行删除以下规则声明似乎​​可以解决问题。

.product-view .product-img-box .more-views ul li:nth-child(2),

当您删除最左边(列表顶部)元素时，Chrome 一定会混淆计算第 n 个子元素。它必须在删除 DOM 元素之前计算第 n 个子元素。

此外，对于 active 类，看起来您不需要 nth-child 规则。