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。现在，单击即可改变背景。

＆＃13;

<!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>

＆＃13;

Answer 2

你的小提琴代码实际上适合我在MS Edge内部运行。

Answer 3

只需更改此行：

<SCRIPT LANGUAGE="JavaScript">

到

<script>

此外，您在包含脚本文件时未定义类型，在每个开头<script>标记中也添加此行

type="text/javascript"

每次点击按钮时如何更改背景

3 个答案: