我该如何写这个更短的jquery？

Question

我想缩短这段代码，但不知道如何

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

当用户 select 时，主题变量正在改变，但没有改变纸张背景图像.. :(

Answer 1

无需对您的代码进行根本性更改，您可以将进行更改的部分移到它自己的函数中，然后在启动和单击时调用该函数：

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 更改背景图像，然后 add/remove 类；但我相信这个问题的目的更多的是 DRY 使用问题中的代码作为示例而不是最终要减少的代码。

Answer 2

这更精细但也更灵活

$('#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>

我该如何写这个更短的jquery？

how do i write this shorter jquery?

javascript

jquery

short