点击特定功能的HTML,JQuery按钮

时间:2014-08-11 01:11:05

标签: javascript jquery html css

我有一段脚本可以改变点击背景。但是当我点击屏幕上的任何内容时,背景会发生变化。我只想改变按钮 背景图片。我似乎无法在jquery中正确编码。任何帮助都非常感谢。感谢

<!DOCTYPE html>
<html>
   <style>
      body 
      {
      background:url(Pic/jungle.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }
   </style>
   <body>
      <button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
         $(document).ready(function () {
              var rotate = 0;
              var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
              $('body').on("click", function () {

                  $(this).css({
                      'background-image': colors[rotate]
                  });
                  rotate++;
                  if (rotate >= 2) {
                      rotate = 0;
                  }     

              });   
          });

      </script>

1 个答案:

答案 0 :(得分:1)

您希望将事件绑定到按钮,然后选择正文并对其执行css操作。你的代码看起来像这样:

$('button').on("click", function () {
    $('body').css({
        'background-image': colors[rotate]
    });
});