我如何编写这个较短的 jquery？

Posted 2023-02-16

【中文标题】我如何编写这个较短的 jquery？

【英文标题】：how do i write this shorter jquery?

【发布时间】：2020-03-23 08:32:27

【问题描述】：

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

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

当用户选择某些东西但不改变纸张背景图像时，主题变量正在改变.. :(

【问题讨论】：

您现在仅更改点击处理程序中的变量值，但您不再更新任何其他内容。

如果你有两次相同的代码，把它放在一个函数中并调用它。

去掉双倍间距会变短

看看if语句中两行代码有什么变化；文件名。该文件名与theme 变量相同。因此，如果您使用字符串连接，这可以是一行代码。同样，将重复的逻辑放在一个函数中，在需要的位置调用。

【参考方案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 更改背景图像，然后添加/删除类；但我认为问题的意图更多地与DRY 使用问题中的代码作为示例而不是要减少的最终代码有关。

【讨论】：

怎么样：function setTheme(theme) $('.paper').css('background-image':'url(`$theme.jpg`)');

TY 为您提供帮助♥。

【参考方案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>