0

日時条件を使用してワードプレスのボディ要素にクラスを追加する方法を考えています。例があります：

jQuery(document).ready(function() {



function applyclass()
{
var d = new Date();
var n = d.getHours();





if (n > 20 && n < 06)
jQuery('body').addClass('night');

else if (n > 16 && n < 19)
jQuery('body').addClass('sunset');

else
jQuery('body').addClass('day');
}
window.onload = applyclass;


});

フォルダの場所を含め、コンソール エラーがないことをすべて確認しましたが、問題はこのスクリプトが実行されていないことです。

ありがとう！

4

5 に答える 5

2

body 関数にクラスを追加する方がはるかに優れています

<body <?php body_class($class); ?>>

jQueryで書き直すより。見る

http://codex.wordpress.org/Function_Reference/body_class#Add_Classes_By_Filters

テーマの functions.php ファイルの body クラスにフックする方法について。

于 2012-10-13T02:51:41.383 に答える
1

if ステートメントが間違った条件をテストしています。

if (n > 20 && n < 06)
    jQuery('body').addClass('night');

n20 より大きい AND 6 より小さいことはできません (また、数字の前にゼロを付ける必要はありません。間違っているとは思いませんが、不要です) 。

window.onloadコードのブロック全体はドキュメントがロードされた後にのみ実行されるため、この部分も必要ありません。代わりに、document.ready を呼び出しapplyclass()て、関数をブロックの外に移動するだけです。

しかし、それを除けば、コードに問題はなく、ロジックが間違っています。何をしたいのかを理解し、if ステートメントの条件を変更すると、機能するはずです。

于 2012-10-13T02:21:15.337 に答える
0

window.onload ステートメントを削除してみてください。それは冗長です。関数の呼び出しに置き換えます。

applyclass();

最初の行:

jQuery(document).ready(function() {

DOM がロードされるまで、これが実行されないことを既に確認しています。

于 2012-10-13T02:21:38.007 に答える
0

解決策を見つけました。jQuery(document).ready(function () {} を削除し、いくつかのステートメントを変更しました。現在は機能しています。問題を解決したスニペットを次に示します。このスニペットを自由に最適化してください。質問に答えてくれてありがとう!

    function applyclass()
{
var d = new Date();
var n = d.getHours();


if (n == 5)
jQuery('body').addClass('night');
if (n == 4)
jQuery('body').addClass('night');
if (n == 3)
jQuery('body').addClass('night');
if (n == 2)
jQuery('body').addClass('night');
if (n == 1)
jQuery('body').addClass('night');
if (n == 0)
jQuery('body').addClass('night');
if (n == 23)
jQuery('body').addClass('night');
if (n == 22)
jQuery('body').addClass('night');
if (n == 21)
jQuery('body').addClass('night');
if (n == 20)
jQuery('body').addClass('night');


else if (n == 6)
jQuery('body').addClass('sunset');
else if (n == 7)
jQuery('body').addClass('sunset');
else if (n == 8)
jQuery('body').addClass('sunset');
else if (n == 18)
jQuery('body').addClass('sunset');
else if (n == 19)
jQuery('body').addClass('sunset');

else if (n == 9)
jQuery('body').addClass('day');
else if (n == 10)
jQuery('body').addClass('day');
else if (n == 11)
jQuery('body').addClass('day');
else if (n == 12)
jQuery('body').addClass('day');
else if (n == 13)
jQuery('body').addClass('day');
else if (n == 14)
jQuery('body').addClass('day');
else if (n == 15)
jQuery('body').addClass('day');
else if (n == 16)
jQuery('body').addClass('day');
else if (n == 17)
jQuery('body').addClass('day');

}
window.onload = applyclass;
于 2012-10-13T04:12:04.647 に答える