как мне написать это короче jquery? - PullRequest
Новая
       71

как мне написать это короче jquery?

0 голосов
/ 23 марта 2020

Я хочу, чтобы этот код был короче, но не знаю, как 

    var theme;

    theme = 'summer' // for set default in source code

        if (  theme == 'summer' ) {
            $('.paper').css({'background-image':'url("summer.jpg")'});
            }
        if ( theme == 'spring' ) {
            $('.paper').css({'background-image':'url("spring.jpg")'});
        }

    // and set theme when user select ..

    $('#select ul li').click(function(){

        theme = $(this).attr('class');

        if (  theme == 'summer' ) {
            $('.paper').css({'background-image':'url("summer.jpg")'});
        }
        if ( theme == 'spring' ) {
            $('.paper').css({'background-image':'url("spring.jpg")'});
        }

    });

этот код работает, но я хочу что-то вроде этого 

    var theme;
    theme = 'summer'
    $('#select ul li').click(function(){
       theme = $(this).attr('class');
    });

    if (  theme == 'summer' ) {
        $('.paper').css({'background-image':'url("summer.jpg")'});
        }
    if ( theme == 'spring' ) {
        $('.paper').css({'background-image':'url("spring.jpg")'});
    }

, когда тема выбирается, когда пользователь выбирает что-то, но не ' t изменить фоновое изображение бумаги ..: (

Ответы [ 2 ]

2 голосов
/ 23 марта 2020

Не внося фундаментальных изменений в свой код, вы можете переместить деталь, которая вносит изменения, в свою собственную функцию, а затем вызвать эту функцию при запуске и по щелчку: 

function setTheme(theme) {
    if (theme == 'summer') {
        $('.paper').css({'background-image':'url("summer.jpg")'});
    }
    if (theme == 'spring') {
        $('.paper').css({'background-image':'url("spring.jpg")'});
    }
}

$(function() { 
    // change on click
    $('#select ul li').click(function(){
        theme = $(this).attr('class');
        setTheme(theme);
    });

    // and on startup
    setTheme('summer');
});

Есть, конечно, много других способов улучшить ваш код и уменьшить содержание кода.

Одной из рекомендаций было бы использовать CSS для изменения фонового изображения, а затем добавлять / удалять классы; но я полагаю, что цель вопроса больше связана с DRY, использующим код в вопросе в качестве примера, а не окончательный код, подлежащий сокращению.

0 голосов
/ 23 марта 2020

Это более сложный, но и более гибкий 

$('#select').on("click", "ul li", function(e) {
  const season = $(this).data("season")
  $(this).siblings().each(function() {
    $('.paper').removeClass($(this).data("season"));
    $(this).removeClass("active");
  })
  $('.paper').addClass(season);
  $(this).addClass("active");
})
.parent().find(".active").trigger("click");
.paper.summer {
  background-image: url(summer.jpg);
  background-color: red;
}

.paper.spring {
  background-image: url(summer.jpg);
  background-color: green;
}

.active {
  font-weight: bold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select">
  <ul>
    <li data-season="spring">Spring</li>
    <li class="active" data-season="summer">Summer</li>
  </ul>
</div>
<div class="paper">This is some text</div>
...