當點擊一個div更改圖片

-1

我想要div的背景圖像更改爲'rustb.png'，當用戶點擊時按住div，然後返回'rust.jpg'時放開div（停止點擊）。這是我所擁有的，當我點擊div時它沒有做任何事情。當點擊一個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>

請大家幫忙，謝謝！

來源

2016-12-06 Nate Rice

你在瀏覽器的控制檯中看到什麼錯誤？ – j08691

@ j08691「Moustate沒有定義」？ –

這是唯一的錯誤？如果是這樣，爲什麼你有'onclick =「mouseState（e）」'？ – j08691

你的代碼中有一些問題，

你不要有任何圖片標籤
您正在使用類選擇這是不正確訪問股利。
你應該換你的jQuery事件綁定就緒（）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

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

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

 
<body> 
 

 
    <div id="noclick"> 
 

 
    <p>This is an image</p> 
 

 
    </div> 
 

 
</body> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $("div#noclick").mousedown(function() { 
 
     $(this).attr("id", 'pushclick'); 
 
     }) 
 
     .mouseup(function() { 
 
     $(this).attr("id", 'noclick'); 
 
     }); 
 

 
    }); 
 
</script> 
 

 
</html>

來源

2016-12-06 14:48:10 ScanQR

<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'); 
    });

fiddle link here

來源

2016-12-06 15:05:58

當點擊一個div更改圖片

回答

相關問題