0

スタックオーバーフローの初心者で、これについて考えるのに多くの時間を費やしていますが、一言で言えば、これを実現するための最良のアプローチと最小限のコードを見つけようとしています。時刻に基づいてアクションを実行する条件があります。下記参照：

var date = new Date();
var time = date.getHours();

if(time < 12){
header.prepend('Morning ');
link.attr('href', 'css/morning.css');
} else if (time >= 12 && time <= 18){
header.text('its afternoon time');
link.attr('href', 'css/day.css');
} else {
header.prepend('Night ');
link.attr('href', 'css/night.css');
}

クリックイベントでも同様のアクションが発生しています。

$('button').click(function(){
var styleswitcher = $(this).text().toLowerCase();
link.attr('href', 'css/' + styleswitcher + '.css');
});

それらを 1 つの関数に結合する方法はありますか? 条件付きイベントとクリック イベントでスタイルシートを 2 回呼び出すことで、自分自身を繰り返しているように感じます。したがって、時間とクリックイベントが一致する場合の行に沿ったものは、適切なスタイルシートを表示します。助けてくれてありがとう！

4

1 に答える 1

1

はい、コードをパッケージ化して関数に入れるだけです。

$(document).ready(function() {

    function change_css() {    
        var date = new Date();
        var time = date.getHours();
        var styleSwitcher = 'night';

        if(time < 12) {
            styleSwitcher = 'morning';
        }

        else if(time >= 12 && time <= 18) {
            styleSwitcher = 'day';
        }

        link.attr('href', 'css/' + styleSwitcher + '.css');
    }

    change_css(); // First call on initial run.

    $('button').click(function() {
        change_css();
    });

});

注: このコードをテストする時間はありませんでしたが、考え方は正しいです。

于 2013-02-08T21:41:30.883 に答える