jquery img的click事件不起作用

时间：2022-12-05 19:58:13
RT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">

/*$(".small").hover(function(){
    $("http://v.pp.cn/static/img/index_big.png").lazyload(); 
},function(){});*/

/*$(".small").click(function(){
    $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});*/

$("img.small").bind("click",function(){
    alert(1);
    $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
</script>
<img src="http://testv.pp.cc/static/img/no_photos.jpg"> <br>
<img src="http://testv.pp.cc/static/img/d.jpg"> <br>
<img class="small" id="small" src="http://testv.pp.cc/static/img/s.jpg"> <br>

7 个解决方案

#1

$(document).ready(function() {

$("img.small").bind("click",function(){
  alert(1);
  $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});

#2

1楼说的没问题。。。
他提供的代码红字部分的简化写法是 


$(function() {

    // your code

}


然后唠叨两句，首先这个是前端问题，你应该发在JS区。。。
其次，建议你在w3school里看看基础的JS、jquery教程。。

最次，记住一点，你可以这么理解“jquery对页面元素的操作，都要以匿名函数的方式写在document的ready事件里。或者在document.ready事件之后”

#3

引用 1 楼  的回复:
$(document).ready(function() {

$("img.small").bind("click",function(){
  alert(1);
  $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});


还是不行

#4

我试过是可行的，你看看控制台报什么错了

#5

引用 3 楼  的回复:
引用 1 楼  的回复:

$(document).ready(function() {

$("img.small").bind("click",function(){
alert(1);
$(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});


还是不行 




$(function(){

    $("img.small").click(function(){

        alert(1);

        $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");

    })

})


其实可以这么写。。
还有就是，如果你说不行，先用firebug看看，在控制台里输入
$('img.samll')
能不能获取这个元素

#6

引用 4 楼  的回复:
我试过是可行的，你看看控制台报什么错了


现在好了，追问：我想做个大小图的切换功能，现在第一次小图切换到大图有闪烁现象，希望鼠标移到小图时就延迟加载大图，网上说用jquery lazload，但是不知道怎么用的，有人用过吗，我用了第一次切换时还是有闪烁现象。

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".image").find('img').click(function() {
        bind_image($(this)[0]);
    });
    
    $(".image").find('img').hover(function(){
        $("http://testv.pp.cc/static/img/index_big.png").lazyload(); 
    }, function(){});
});



function bind_image(obj)
{
    var narrow = $(obj).next().hasClass('narrow');

    if ( ! narrow)
    {
        $(obj).after('<img src="http://testv.pp.cc/static/img/index_big.png" class="narrow"/>');
    }
    
    $(obj).hide();
    $(this).parent().css("width", $(this).width());
    $(obj).next().show();
    
    $(obj).next().click(function() {
        $(this).hide();
        $(this).prev().show();
    });
}
</script>
<div class="image">
    <img src="http://testv.pp.cc/static/img/index_small.png">
</div>
lazload插件下载：http://www.appelsiini.net/download/jquery.lazyload.js

#7

引用 2 楼  的回复:
1楼说的没问题。。。
他提供的代码红字部分的简化写法是
JScript code

$(function() {
    // your code
}



然后唠叨两句，首先这个是前端问题，你应该发在JS区。。。
其次，建议你在w3school里看看基础的JS、jquery教程。。

最次，记住一点，你可以这么理解“jquery对页面元素的操作，都要以匿名函数的方式写在docu……

php区要活跃点，原来在js区发帖都没什么人回，所以就发在php区

#1

$(document).ready(function() {

$("img.small").bind("click",function(){
  alert(1);
  $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});

#2

1楼说的没问题。。。
他提供的代码红字部分的简化写法是 


$(function() {

    // your code

}


然后唠叨两句，首先这个是前端问题，你应该发在JS区。。。
其次，建议你在w3school里看看基础的JS、jquery教程。。

最次，记住一点，你可以这么理解“jquery对页面元素的操作，都要以匿名函数的方式写在document的ready事件里。或者在document.ready事件之后”

#3

引用 1 楼  的回复:
$(document).ready(function() {

$("img.small").bind("click",function(){
  alert(1);
  $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});


还是不行

#4

我试过是可行的，你看看控制台报什么错了

#5

引用 3 楼  的回复:
引用 1 楼  的回复:

$(document).ready(function() {

$("img.small").bind("click",function(){
alert(1);
$(this).attr('src', "http://v.pp.cn/static/img/index_big.png");
});
});


还是不行 




$(function(){

    $("img.small").click(function(){

        alert(1);

        $(this).attr('src', "http://v.pp.cn/static/img/index_big.png");

    })

})


其实可以这么写。。
还有就是，如果你说不行，先用firebug看看，在控制台里输入
$('img.samll')
能不能获取这个元素

#6

引用 4 楼  的回复:
我试过是可行的，你看看控制台报什么错了


现在好了，追问：我想做个大小图的切换功能，现在第一次小图切换到大图有闪烁现象，希望鼠标移到小图时就延迟加载大图，网上说用jquery lazload，但是不知道怎么用的，有人用过吗，我用了第一次切换时还是有闪烁现象。

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".image").find('img').click(function() {
        bind_image($(this)[0]);
    });
    
    $(".image").find('img').hover(function(){
        $("http://testv.pp.cc/static/img/index_big.png").lazyload(); 
    }, function(){});
});



function bind_image(obj)
{
    var narrow = $(obj).next().hasClass('narrow');

    if ( ! narrow)
    {
        $(obj).after('<img src="http://testv.pp.cc/static/img/index_big.png" class="narrow"/>');
    }
    
    $(obj).hide();
    $(this).parent().css("width", $(this).width());
    $(obj).next().show();
    
    $(obj).next().click(function() {
        $(this).hide();
        $(this).prev().show();
    });
}
</script>
<div class="image">
    <img src="http://testv.pp.cc/static/img/index_small.png">
</div>
lazload插件下载：http://www.appelsiini.net/download/jquery.lazyload.js

#7

引用 2 楼  的回复:
1楼说的没问题。。。
他提供的代码红字部分的简化写法是
JScript code

$(function() {
    // your code
}



然后唠叨两句，首先这个是前端问题，你应该发在JS区。。。
其次，建议你在w3school里看看基础的JS、jquery教程。。

最次，记住一点，你可以这么理解“jquery对页面元素的操作，都要以匿名函数的方式写在docu……

php区要活跃点，原来在js区发帖都没什么人回，所以就发在php区
标签：

相关文章