Question

我目前正在尝试使用JQuery并尝试制作我自己的投资组合，这将改变点击时显示的项目。我在那里有很多重复的代码，想要清理它，我知道我以前是如何用Java做的，但我忘记了方法的名称。

最后我想有类似的东西，但我忘了怎么做：

$('.projects a[href^="#"]').on('click',function (e){

        var href = $(this).attr('href');;

        changePortfolio(String head, String text, String imgsource){
                $(".description-head").html(head);
                $(".description-text").html(text);
                $('.preview').attr('src',imgsource);
        }

        if(href == "#project-portfolio"){

            changePortfolio("Portfolio", "this is my portfolio", "bg.png");

        }

我目前的代码：

$('.projects a[href^="#"]').on('click',function (e){

        var href = $(this).attr('href');;

        if(href == "#project-portfolio"){

            $(".description-head").html("PORTFOLIO WEBSITE");
            $(".description-text").html("This is the portfolio website description");
            $('.preview').attr('src','img/bg.jpg');

        } else if(href == "#project-preview2"){

            $(".description-head").html("PREVIEW 2");
            $(".description-text").html("This is the preview 2 description");
            $('.preview').attr('src','img/placeholder.jpg');

        } else if(href == "#project-preview3"){

            $(".description-head").html("PREVIEW 3");
            $(".description-text").html("This is the preview 3 description");
            $('.preview').attr('src','img/placeholder.jpg');

        } else if(href == "#project-preview4"){

            $(".description-head").html("PREVIEW 4");
            $(".description-text").html("This is the preview 4 description");
            $('.preview').attr('src','img/placeholder.jpg');

        }  else if(href == "#project-preview5"){

            $(".description-head").html("PREVIEW 5");
            $(".description-text").html("This is the preview 5 description");
            $('.preview').attr('src','img/placeholder.jpg');

        }
    });

感谢阅读：）

Answer 1

考虑这样的事情：

const HREF_TABLE = {
    'project-portfolio': {
        'head': "PORTFOLIO WEBSITE",
        'text': 'This is the portfolio website description',
        'preview': 'img/bg.jpg'
    },
    'project-preview2': {
        'head': "PREVIEW 2",
        'text': 'This is the preview 2 description',
        'preview': 'img/placeholder.jpg'
    }
}

$('.projects a[href^="#"]').on('click', function() {
    let href = $(this).attr('href');
    let changeTo = HREF_TABLE[href.substr(1)];

    if ( changeTo !== undefined ) {
        changePortfolio(changeTo);
    }
});

在我看来，编辑它很容易，而不是使用switch-case机制......

Answer 2

将化妆品变化冷凝成功能是第一步。我建议的第二步是采用冗长而凌乱的if/else语句并使用switch，如下所示：

switch (href) {
    case "#project-portfolio":
        changePortfolio(...);
        break;
    case "#project-preview2":
        changePortfolio(...);
        break;
    // correspondingly for every case
    default:
        changePortfolio(...) // whatever the 'backup' should be
                             // if none of the above cases are met
}

如何清理我的Jquery代码？

2 个答案: