jQuery 滑块不透明度错误仅在 Google Chrome 上答案

【问题标题】：jQuery slider opacity error only on Google ChromejQuery 滑块不透明度错误仅在 Google Chrome 上
【发布时间】：2013-09-28 06:44:31
【问题描述】：

我在 Magento 网站上有一个定制的滑块。它具有响应性并具有自定义触摸行为。行为应该如下：

三个图像滑块，中间的不透明度应该是 1.0，其余的只有 0.15
在较小的分辨率下，仅显示 2 张图像。右边的应该有 1.0 左边的图像应该有 0.15 的不透明度
在移动设备上，显示 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; }

JAVASCRIPT 很长，你可能想检查元素。但想法如下。当您单击 NEXT 箭头时，将克隆列表的第一个元素，附加到的后面并从第一个位置销毁。稍后活动类被删除并添加到列表中的第二个<li>。像这样的

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

第 1 步

<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. 如果您调整浏览器大小，您会看到不透明度再次设置为 0.15 4. 如果您在 Firebug 中启用/禁用不透明度，它会正常工作。 5. 如果您在下一个箭头上单击 2 次，不透明度错误就会消失。

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

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

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

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

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

此外，对于活动类，您似乎不需要 nth-child 规则。

【讨论】：