Question

抱歉我的英文。我正在尝试建立一个网站，在那里你点击一个总统的图片和jQuery改变网站的背景。我的代码真的很大而且很笨拙。有没有办法使用循环或其他东西来缩短它？提前谢谢。

 $(document).ready(function(){
  $('#truman').click(function(){
    $('body').css('background', 'url(img/bg/trumanBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#kennedy').click(function(){
    $('body').css('background', 'url(img/bg/kennedyBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#eisenhower').click(function(){
    $('body').css('background', 'url(img/bg/eisenhowerBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#johnson').click(function(){
    $('body').css('background', 'url(img/bg/johnsonBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#nixon').click(function(){
    $('body').css('background', 'url(img/bg/nixonBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#ford').click(function(){
    $('body').css('background', 'url(img/bg/fordBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
});

Answer 1

给他们所有同一个班级 - 这里＆＃34;总统＆＃34;并做

$(function(){
  $('.president').click(function(){
    $('body').css('background', 'url(img/bg/'+this.id+'Bg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover'); 
    .....

另一种方法是改变图像 -

$(function(){
  $('.president').click(function(){
    $("body").css('background-image','url(img/bg/'+this.id+'Bg.jpg)'); 
  });  
});

另一种选择是只更改类，但如果在body标签上有多个类

，请观察它

Answer 2

我把你的共同事物包裹在一个功能中。当你想要添加更多样式时，你可以做更多的事情。

如果您没有同一课程，这将非常有用。

$(document).ready(function(){
      $('#truman').click(function(){
       applyStyles("truman");
      });
      $('#kennedy').click(function(){
       applyStyles("kennedy");
      });
      $('#eisenhower').click(function(){
        applyStyles("eisenhower");
      });
      $('#johnson').click(function(){
        applyStyles("johnson");
      });
      $('#nixon').click(function(){
        applyStyles("nixon");
      });
      $('#ford').click(function(){
        applyStyles("ford");
      });
    });

function applyStyles(name) {
        var url = 'url(img/bg/'+name+'Bg.jpg) no-repeat center center fixed';
        $('body').css('background', url);
        $('body').css('-webkit-background-size', 'cover');
        $('body').css('-moz-background-size',    'cover');
        $('body').css('-o-background-size',      'cover');
        $('body').css('background-size',         'cover');

}

Answer 3

发表我的评论作为答案，我会这样：

在HTML中，我将总统包装在一个div中，并在CSS中使用与DIV id相同的类名，因此用JS编写它会更短。

＆＃13;

function clearPreviousPresidentClass() {
  $('body').removeClass('nixon truman kennedy');
}

$('document').ready(function() {
  $('#presidents').click(function(event) {
    clearPreviousPresidentClass();
    $('body').addClass(event.target.id);
  });
});

＆＃13;

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.truman {
  background-color: red;
}

.nixon {
  background-color: blue;
}

.kennedy {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="presidents">
    <div id="nixon">Nixon</div>
    <div id="truman">Truman</div>
    <div id="kennedy">Kennedy</div>
  </div>
</body>

＆＃13;

如何缩短代码？

3 个答案: