如何缩短代码？

对不起，我的英文。我正在尝试创建一个网站，点击总统的照片，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'); 
    }); 
});

来源

2017-01-21 Gleb Umarov

你可以通过去除'背景size'的所有供应商前缀的版本，这是没有必要的，一直没一会儿开始。事实上，我不认为曾经有过“-o-background-size”。 –

给他们所有的同一类 - 在这里“总统”，并做

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

另一种方法是只需更改类但看它，如果你有超过一个类的身体标记

来源

2017-01-21 11:37:12 mplungjan

感谢大家的支持，但这是我寻找的解决方案。 –

我已经包裹你的共同的东西在一个功能。当你想添加更多样式时，你可以做更多的事情。

当你没有同班同学时，这会非常有帮助。

$(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'); 

}

来源

2017-01-21 11:41:15 Nagaraju

这仍然是非常重复的 – mplungjan

@mplungjan这就是我提到它的原因只有当有不同的类名。这里的OP没有发布的HTML部分本来会更容易减少重复部分 – Nagaraju

没有必要的HTML - 他只是改变身体标记 – mplungjan

张贴作为一个答案我的意见，我会走这条路：

在HTML，我会包裹在总统一个div，并在CSS中使用相同的类名作为DIV id，所以在JS中写入会更短。

function clearPreviousPresidentClass() { 
 
    $('body').removeClass('nixon truman kennedy'); 
 
} 
 

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

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

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

来源

2017-01-21 11:47:31

如何缩短代码？

回答

相关问题