像往常一样，我在Firefox中开发了它。通常它无需修改即可在Chrome / Safari和IE8中使用。
但是当我在Chrome和Safari上测试时，我惊讶地发现它不起作用。
我的CSS有效（在w3c上验证）。 JavaScript（使用jQuery）似乎也是有效的。
在通过jQuery修改属性值后，不会重新绘制受影响的元素，因此不会应用新属性值的CSS规则，直到我进入Chrome检查器并取消选择/手动选择它们
更新：我没有这个问题的工作链接了。
问题是Webkit在更改属性时不是“重绘”，而是仅在更改了类时，因此当属性div[attr=value]更改为attr时，带有value等选择器的CSS块将不适用.className通过JavaScript。
一种解决方法是在选择器中使用类而不是属性（{{1}}）。更改属性后执行类更改也会触发重绘也可以解决问题。
此帖已超过5年，我相信此问题已在Chrome中得到修复。
答案 0 :(得分：2)
问题似乎来自于您使用属性（DIV上的selected属性）控制图像状态的事实;似乎webkit引擎在实际发生变化之前不会更新图形 - 比如类或样式属性。
通常，您应该知道使用这样的自定义属性不是最佳做法。您可以使用类来指示它何时开启，并在需要时使用.addClass("selected")，.removeClass("selected")。
此外，您可以将图像显示为元素的背景图像，并直接通过CSS控制它：
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
这只会根据div.item selected类更改图片。
对于简单的解决方法，您可以在.click处理程序的底部添加类似$("body").toggleClass("somethingrandom");的内容，但我建议您更改代码以使用CSS，背景图像和类
答案 1 :(得分：1)
您是否在Safari中打开了错误控制台？
在我的情况下，我在两个文件上收到 404错误 ...
/bras/bras/A/3/2/1/bra.png
和
/bras/bras/A/1/pink/3/bra.png
修改
您的文档末尾还有一个</head>标记，而不是</html>标记。
答案 2 :(得分：1)
您是否只需要修改属性值？也可以很容易地将“选定”类添加到<div class="item" />。单独使用此功能/以及您的属性目标css将自动更新图像显示。