IE 正在用 JQuery 做奇怪的事情答案

【问题标题】：IE is doing strange things with JQueryIE 正在用 JQuery 做奇怪的事情
【发布时间】：2010-05-05 11:56:30
【问题描述】：

所以...问题是，代码在 FireFox 中运行，没有问题。但是当我打开同一个页面时，它给了我以下错误：

“未定义为空或不是对象。”

但是当我将代码复制到本地主机页面时，它工作正常。此外，当我在 IE 中清除缓存时，它可以工作，但只有一次，如果我在加载后刷新，它会给我同样的错误。

代码如下：

<script type="text/javascript" src="datepicker/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
     var count3 = 0; 
     var count5 = 0;
     var count2 = 0;
     var count4 = 0;

    $(document).ready(function(){

    $('#switch3').click(function(){
        $('#switchDiv3').slideToggle(350);
            if(count3 == 0){
            count3 = 1;
            document.getElementById('switchImage3').src = "images/ArrowDown.png";
            return;
            } else {
            count3 = 0;
            document.getElementById('switchImage3').src = "images/ArrowRight.png";
            return;
            }
    });

    ... (this is the code for each item that is generated) 
    </script>

以及确定应该隐藏的 div 的代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td width="20" align="center" valign="top" style="padding-right: 3px">
            <a style="cursor: pointer;" id="switch3"><img width="20" height="20" src="images/ArrowRight.png" id="switchImage3" style="border-style: solid; border-width: 1px; border-color: black;"/></a>
        </td>
        <td>
            <div id="switchDiv3">
                <div align="left">
                    (Contents of the div here)
                </div>
            </div>
        </td>
    </tr>
</table>

感谢任何帮助！

提前致谢

【问题讨论】：

返回在你的代码中做了什么？

标签： javascript jquery internet-explorer firefox

【解决方案1】：

你需要描述你想做什么。我猜你想显示和隐藏一个 div 并在你这样做时从左到右切换一个箭头。

你可以使用切换功能，它真的很酷，这是你想要的附近的一个例子（我猜）。

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#switch3").toggle(function(){
                $("#switch3").html('<-');
                $("#switchDiv3").slideToggle(350);;

            }, function(){
                $("#switch3").html('->');
                $("#switchDiv3").slideToggle(350);
            });
        });
    </script>
</head>
<body>
    <div>
    <a id="switch3" style="cursor: pointer;"> -> </a>
        <div id="switchDiv3" style="background-color: red">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</body>

顺便说一句，我只使用内联样式作为示例，你应该使用外部样式表。

【讨论】：

我找到了问题，或者至少我认为我找到了：p 我目前实习的公司（学校的东西......）没有告诉我他们也使用原型 1.5 框架。所以我猜测这两个框架相互干扰......所以我现在要做的就是使用 Prototype 创建相同的函数，但这需要一段时间，因为我从未使用过那个.. . 无论如何感谢您对此事的帮助^^
@syncopated：这两个库可以相互操作。查看 jquery 文档，了解如何使用 $ 以外的符号来访问 jq 库。我会为您查找链接，但不幸的是，我目前正在使用手机。 :\
例如 jquery('html').remove();它只是更长的时间，但是你真的需要两个做同样事情的库吗？也许 2-3 功能不同

【解决方案2】：

所以...

原型函数也不起作用，不知道为什么...... 所以现在我只是要尝试更改显示属性。

也没有运气。脚本改变了箭头，但没有隐藏 div ...

代码如下：

var count3 = 0;
function showHideDiv3(){
    if(count3 == 0){
        document.getElementById('switchDiv3').style.display = '';
        document.getElementById('switchImage3').src = "images/ArrowDown.png";
        count3 = 1;
    }else{
        if(count3 == 1){
            document.getElementById('switchDiv3').style.display = 'block';
            document.getElementById('switchImage3').src = "images/ArrowRight.png";
            count3 = 0;
        }
    }
}

div 的名称是正确的。我已经检查过了，我的 3 位同事也仔细检查了。

这让我发疯和沮丧，哈哈。

【讨论】：

【解决方案3】：

您只是想交换图标来指示状态吗？如果是这样，只需选择放置在图像上的 id 的 src 属性并交换图形。

所以，使用类似的东西：

$('#swtichImage3').hover(function() {
$(this).attr('src', 'images/ArrowDown.png');
}, function(){
$(this).attr('src', 'images/ArrowRight.png');
});

在该示例中，我使用了 hover() 操作，但您可以交换它。我只是想展示一种更简单的交换 src 属性的方法。

【讨论】：