Javascript/jquery 代码在 IE 9 之前无法运行。在 FF、Chrome、Safari 中运行良好

Question

此代码适用于 FF、Safari、Chrome 和 IE9，但在 9 之前的 IE 中不能 100% 工作。图像的淡入淡出效果有效，但是当我尝试更改悬停部分的文本颜色时该代码不起作用。这让我相信这是代码的 .attr 部分的问题？

我确信有更好的方法来做到这一点，因此我们将不胜感激。

编辑:当我将鼠标悬停在图像上时，第二个 div 中的文本应该改变颜色。然后，当我将鼠标移开时，文本颜色应该会再次更改。

这是我的 JavaScript 代码:

<script>
$(document).ready(function(){
$("#boxes li img").fadeTo("fast", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$("#text-boxes li").css("color","#f2f2f4");

$("#boxes li img").hover(function(){
$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
var id = $(this).attr("id");
$("#text-boxes li#"+id).css("color","#333333");

},function(){
$(this).fadeTo("fast", 0.6); // This should set the opacity back to 60% on mouseout
$("#text-boxes li").css("color","#f2f2f4");
});
});
</script>

这是我的 html 代码:

<img src="images/where.png" alt="where would you like to visit first?" /><br>
    <ul id="boxes">
        <li><a href="#"><img id="a" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="b" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="c" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="d" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="e" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="f" src="images/mom-stories.jpg" /></a></li>
    </ul>

<div style="width:100%;height:80px;background:#f2f2f4;overflow:auto;">
    <ul id="text-boxes" style="padding-top:15px;">
        <li id="a" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="b" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="c" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="d" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="e" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="f" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
    </ul>
</div>

Answer 1

问题可能是您对 ID 的非身份使用。 ID 在整个文档中必须是唯一的，但您对图像和列表条目使用相同的 ID(a、b、c...)。

尝试更改列表元素中的 ID 架构(例如更改为“<li id="textboxa">”、“textboxb”...并相应地更改您的 JavaScript:

// in the first hover function
$("#textbox"+id).css("color","#333333");