3

2 つの異なるテーマ (昼間モードと夜間モードなど) の間で、クリック時に background-image と background-color を循環させたいと考えています。

  1. この関数は、2 回目のクリックで背景のみを変更します。リンクを最初にクリックしても、背景の CSS は変更されません。
  2. 循環させたい背景画像/色は2つしかありませんが、2つの間でコードを循環させる方法がわからないため、最終的に壊れる長い配列があります。

コード：

var allImages = ["bg-clouds.png", "bg-cloudsNight.png", "bg-clouds.png", "bg-cloudsNight.png", "bg-clouds.png"];

var allColors = ["#b7d9ef", "#011157", "#b7d9ef", "#011157", "#b7d9ef"];

$(document).ready(function() {
    $("#theLink").click(function() {
        var newImageLink = allImages.pop();
        var newColor = allColors.pop();
        $("body").css("background-image", "url(" + newImageLink + ")");
        $("body").css("background-color", "" + newColor + "");
    });
});

この機能が 2 回目のクリックでのみ機能する理由を教えてください。

PS: ewb.atworq.com/permagoo/ で実際の動作を確認できます (#theLink は左上隅にあります)。

4

2 に答える 2

3

最初のクリックの問題を修正し、色を永久に循環させる、少し異なるアプローチをとります。

ページ テンプレートに次のようなものを追加します。

<style>
.daytime {
   background-image: url('bg-clouds.png');
   background-color: #b7d9ef;
}
.nighttime {
   background-image: url('bg-cloudsNight.png');
   background-color: #011157;
}
</style>

次に、テンプレートなどを編集します:<body class="daytime">ページがレンダリングされるとき

daytimeクラス名を次のnighttimeように変更するだけで、画像と色の両方を切り替えることができます。

<script>
$(document).ready(function() {
    $('#theLink').click(function() {
        $('body').toggleClass('daytime nighttime');
        return false;
    });
});
</script>

を呼び出すと.toggleClass()、要素に存在するすべてのクラスが削除され (daytime最初の要素に存在しますclick)、存在しないクラスが追加されます (nighttime追加されます)。

于 2012-10-06T15:20:05.783 に答える
0

私はサイトであなたのコードを調べました..そしてあなたは繰り返し値の2つの大きな配列になることは正しいです-これは良いコードを書く方法ではありません（申し訳ありません）。Ryan953によって提案されたものと同様のものをお勧めしますが、CSSファイルにクラスを追加せずにこれを達成したいと考えているようです。だからここに私がすることの実際の例があります。それは多くの背景画像を可能にします。

<html>
<head>
    <title>background image and color cycle</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        var allImages = [
                "http://ewb.atworq.com/permagoo/theworks/dreaming2012/images/bg-clouds.png", 
                "http://ewb.atworq.com/permagoo/theworks/dreaming2012/images/bg-cloudsNight.png",
                "http://degnedyrlaegen.dk/picts/background-header.jpg"
            ];

        var allColors = [ "#b7d9ef", "#011157", "#a1e35b" ];

        var current = 0;

        $(document).ready(function() {
            $("#theLink").click(function() {
                $("body").css("background-image", "url(" + allImages[current] + ")").css("background-repeat","repeat-x");
                $("body").css("background-color", "" + allColors[current] + "");
                current = (current++ < allImages.length - 1) ? current : 0 ;
            });
        });
        </script>
</head>
<body>
    <h2>background image and color cycle</h2>
    <button id="theLink">cycle background</button>
</body>
</html>

上記のコードをコピーしてローカルのHTMLファイルに貼り付け、ローカルで実行できます。これで動作するはずです。:)

于 2012-10-06T16:34:51.190 に答える