每次單擊按鈕時如何更改背景

Question

大家好，我正在為孩子們創建一個數學游戲，我希望用戶單擊按鈕時能夠更改其游戲的背景圖像。我有一個空間/叢林/沙漠主題，我嘗試了在網上找到的這段代碼但它無法正常工作，盡管http://jsfiddle.net/Eqdfs/27/可以在這里工作？

請記住，我在原始程序中使用的是jquery mobile，並且此代碼設置了默認背景

 <style>
body {
    background-image: url("http://s21.postimg.org/9bj52fal3/sdfsdfdsf.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: fixed;
    background-size:100% 100%;
}
.ui-page {
    background: transparent;
}
.ui-content{
    background: transparent;
}

</style>

然后我發現這段代碼聲稱可以添加按鈕來更改背景圖像，但我無法在這個簡單的html文件中使用它，但是在我的實際游戲中卻無法使用

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.js></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<style>
body {
    background-repeat:repeat;
    background-position:top-left;
}

body.class1 {
    background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}

body.class2 {
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}

body.class3 {
    background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>

<script>
$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});
</script>

</head>
<body>

<a id="btn1">Noise BG</a><br/>
    <a id="btn2">RVB BG</a><br/>
    <a id="btn3">dunno BG</a>   

</body>
</html>

Answer 1

真正的問題是jquery-mobile和jquery-UI相互沖突。 此外，您的設計中幾乎沒有標記問題。 嘗試此代碼，並檢查其是否有效

編輯更新的jQuery。 現在，單擊即可更改背景。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <style type="text/css"> body { background-repeat: repeat; background-position: top-left; } a#btn1, a#btn2, a#btn3 { color: #fff; cursor: pointer; background: #333; padding: 0px 15px; } body.class1 { background-image: url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif'); } body.class2 { background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png'); } body.class3 { background-image: url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png'); } </style> </head> <body> <a id="btn1">Noise BG</a> <br/> <a id="btn2">RVB BG</a> <br/> <a id="btn3">dunno BG</a> <script> $("#btn1").click(function() { $('body').removeAttr('class'); $('body').attr('class', 'class1'); }); $("#btn2").click(function() { $('body').removeAttr('class'); $('body').attr('class', 'class2'); }); $("#btn3").click(function() { $('body').removeAttr('class'); $('body').attr('class', 'class3'); }); </script> </body> </html>

Answer 2

您的小提琴代碼實際上對在MS Edge中運行的我有用。

Answer 3

只需更改此行：

<SCRIPT LANGUAGE="JavaScript">

至

<script>

此外，您在包含腳本文件時未定義類型，也請在每個打開的<script>標簽中添加此行

type="text/javascript"

每次單擊按鈕時如何更改背景

問題描述

3 個解決方案

解決方案1
1 已采納 2015-12-12 03:00:12

解決方案2
0 2015-12-12 02:15:49

解決方案3
0 2015-12-12 02:53:48

每次單擊按鈕時如何更改背景

問題描述

3 個解決方案

解決方案1 1 已采納 2015-12-12 03:00:12

解決方案2 0 2015-12-12 02:15:49

解決方案3 0 2015-12-12 02:53:48

解決方案1
1 已采納 2015-12-12 03:00:12

解決方案2
0 2015-12-12 02:15:49

解決方案3
0 2015-12-12 02:53:48