Javascript 单击div更改图像时_Javascript_Jquery_Html_Css

Javascript 单击div更改图像时

javascript jquery html css

Javascript 单击div更改图像时,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望当用户按下div时，div的背景图像更改为'rustb.png'，然后当用户放开div时返回'rust.jpg'（停止按住click）。这就是我所拥有的，当我点击div时，它没有做任何事情 <html> <head> <title> Img Change Testing </title> </head> <style> #noclick { background-image: url("rust.jpg")

我希望当用户按下div时，div的背景图像更改为'rustb.png'，然后当用户放开div时返回'rust.jpg'（停止按住click）。这就是我所拥有的，当我点击div时，它没有做任何事情

<html>

<head>
<title> Img Change Testing </title>
</head>

<style>
#noclick {
    background-image: url("rust.jpg");
    width: 33%;
    height: 50%;
    left: 50%;
    right: 50%;
    background-size: 100% 100%;
}
#pushclick {
    background-image: url("rustb.png");
    width: 33%;
    height: 50%;
    left: 50%;
    right: 50%;
    background-size: 100% 100%;
}
</style>
<body>

<div id="noclick" onclick="mouseState(e)">

    <p>This is an image</p>

</div>

</body>

<script>
$( "img.noclick" )
.mousedown(function() {
$( this ).prop("id", 'pushclick');
})
.mouseup(function() {
$( this ).prop("id", 'noclick');
});
</script>
</html>


Img变化测试
#诺克利克{
背景图片：url（“rust.jpg”）；
宽度：33%；
身高：50%；
左：50%；
右：50%；
背景大小：100%100%；
}
#点击{
背景图片：url（“rustb.png”）；
宽度：33%；
身高：50%；
左：50%；
右：50%；
背景大小：100%100%；
}
这是一个图像
$（“img.noclick”）
.mousedown（函数（）{
$（this.prop（“id”，“pushclick”）；
})
.mouseup（函数（）{
$（this.prop（“id”，“noclick”）；
});

请帮忙，谢谢

您的代码有一些问题

你没有任何图像标签

您正在使用不正确的类选择器访问div

您应该将jQuery事件绑定包装在ready（）中


Img变化测试
#诺克利克{
背景图片：url（“rust.jpg”）；
宽度：33%；
身高：50%；
左：50%；
右：50%；
颜色：红色；
背景大小：100%100%；
}
#点击{
背景图片：url（“rustb.png”）；
宽度：33%；
身高：50%；
左：50%；
右：50%；
颜色：绿色；
背景大小：100%100%；
}
这是一个图像
$（文档）.ready（函数（）{
$（“div#noclick”）.mousedown（函数（）{
$（this.attr（“id”，“pushclick”）；
})
.mouseup（函数（）{
$（this.attr（“id”，“noclick”）；
});
});


这是一个图像
$（“#noclick”）。在（“mousedown”，function（）上{
$（this.attr（“id”，“pushclick”）；
});
$（“body”）。在（“mouseup”上，在“pushclick”上，函数（）{
$（this.attr（“id”，“noclick”）；
});

浏览器控制台中出现了哪些错误？@j08691“Moustate未定义”？这是唯一的错误吗？如果是这样的话，为什么您有

onclick=“mouseState（e）”

？@j08691我知道这是从哪里来的，并删除了onclick=“…”，剩下的唯一错误是“$is not define”。

img.noclick

应该是

#noclick

。这就是复制粘贴代码时发生的情况。

 <div id="noclick" onclick="mouseState(e)">
    <p>This is an image</p>
  </div>

$("#noclick").on("mousedown", function() {
    $( this ).attr("id", 'pushclick');
   });
$("body").on("mouseup","#pushclick",function() {
  $( this ).attr("id", 'noclick');
   });