Как сделать код короче?

Извините за мой английский. Я пытаюсь создать веб-сайт, где вы нажимаете на фотографию президента, а 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 - он только тег body body – 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

Как сделать код короче?

ответ

Смежные вопросы