单击其他图像时隐藏图像

Question

这似乎很简单..但是我对jquery有点不满意，也许我在做一些愚蠢的错误？

我要单击一个图像，然后单击该图像，在它旁边隐藏另一个图像。

 <script type="text/javascript"> 


        $("#butShowMeSomeUnits").click(function() { 
            $('#arrowUnitspic').hide();
        });


 </script>

根据两张图片ID正确。 我想念什么？ 调试它，代码永远不会被触发...

谢谢

编辑

我将我的控件作为ASP母版页上的嵌套控件使用，其ID被重写。 我现在已经固定了ID，但仍然无法获得任何乐趣...我还看到我的标记被呈现为“输入”，这会有所作为吗？

 <head> <script src="js/jquery.min.1.5.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#butShowMeSomeUnits").click(function () { $('#arrowUnitspic').hide(); }); }); </script> </head> <body> <input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits"> </body>

编辑JS小提琴

如果有任何混淆...我用正确的代码假脱的JS小提琴也不起作用...

Answer 1

您需要做好页面准备：

<script type="text/javascript"> 
$(document).ready(function() {
       $("#butShowMeSomeUnits").click(function() { 
            $('#arrowUnitspic').hide();
        });
});
</script>

编辑：在我从下拉列表中选择jQuery 1.10.1之前，您提供的小提琴不起作用。 您会注意到onmouseover首先会更改元素，但是一旦您单击输入，它就会隐藏图像。 您可以验证这是否对您有用吗？

如果答案是否定的，那么我不认为您正在页面上加载jQuery库。 要检查这应该工作：

if (typeof jQuery != 'undefined') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

另外，查看您的浏览器控制台/ dev工具显示了哪些错误可能会有所帮助。

Answer 2

将代码包装在jQuery.ready（）事件中。 还要检查是否已加载jquery js文件。

 $(document).ready(function(){
            $("#butShowMeSomeUnits").click(function() { 
                $('#arrowUnitspic').hide();
            });
    });

Answer 3

您的代码看起来不错，可以在这里检查

您可能会错过的是：

将jQuery脚本加载到页面顶部。
包括$(document).ready(function() { //code here }); 如果您的<img>标记在页面代码中的脚本之后。 这样一来，当页面准备就绪/已加载时，您的代码就会加载。

Answer 4

可能会帮助您的步骤：

确保您正确集成了jQuery lib。 （以检查您是否想在chrome上打开控制台并键入$("html").hide();并查看当前页面是否消失）
确保您的自定义JS文件或代码在jQuery lib的包含之下。
jQuery的一个很好的起点是将所有内容都放入$(document).ready() ，如下例所示：
$（document）.ready（function（）{$（“ img”）。click（function（）{$（“ img”）。hide（）; $（this）.show（）;}）;}）;

单击其他图像时隐藏图像

问题描述

4 个解决方案

解决方案1
2 2013-07-17 17:56:42

解决方案2
1 2013-07-17 17:57:51

解决方案3
0 2013-07-17 17:59:59

解决方案4
0 2013-07-17 18:09:47

单击其他图像时隐藏图像

问题描述

4 个解决方案

解决方案1 2 2013-07-17 17:56:42

解决方案2 1 2013-07-17 17:57:51

解决方案3 0 2013-07-17 17:59:59

解决方案4 0 2013-07-17 18:09:47

解决方案1
2 2013-07-17 17:56:42

解决方案2
1 2013-07-17 17:57:51

解决方案3
0 2013-07-17 17:59:59

解决方案4
0 2013-07-17 18:09:47