0

jQuery の学習を始めたばかりで、ビデオ チュートリアルを見て、学習目的でビデオ チュートリアルとは異なる方法で物事を達成しようとしています。

昼と夜の2つのボタンがあります。[日] をクリックすると、[日] ボタンが無効になり、日のスタイル シートが読み込まれます。[夜] をクリックすると、夜のスタイルシートが読み込まれ、[夜] ボタンが無効になり、[昼] ボタンが有効になります。

これが私のコード ihavenoideawhatimdoing.jpg です。これは私の完全なコードではなく、関連するコードのみを掲載しています。

<head>
    <link rel="stylesheet" href="day.css">
</head>

<button data-file="day">Day</button>
<button data-file="night">Night</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

    // self executing function
    (function() {
        var link = $('link');
        var button = $('button');
        var $this = $(this);

        if (button.data('file', 'day').click()) {
            link.attr('href', 'night.css');
            $this.attr('disabled');
            // code to enable night button, not sure how
        }
        else (button.data('file', 'night').click()) {
            link.attr('href', 'day.css');
            $this.attr('disabled');
            // code to enable the day button, not sure how
        }
    })();

</script>

また、別の質問です。

(function() {
    // code
})();

その関数はページの読み込み時に実行されますか? つまり、その関数内のコードですか? ビデオの男はそれを自律機能と呼んだと思います。

ありがとう！

4

3 に答える 3

2 
<head>
    <link rel="stylesheet" href="day.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<button id="day" disabled>Day</button>
<button id="night">Night</button>

<script type="text/javascript">
    $(function() {
        var link = $('link[href="day.css"]'),
            buttons = $('button');
        buttons.on('click', function() {
            link.attr('href', this.id+'.css');
            buttons.not(this).removeAttr('disabled');
            $(this).attr('disabled', 'disabled');
        });
    });
</script>​

ここにフィドルがあります。コンソールでスタイルシートの変更を確認できます。

于 2012-05-24T22:54:44.387 に答える
1

この.clickステートメントは、要素のクリックをトリガーします。イベントが発生するたびにその関数をトリガーする要素を選択した後、それに関数を渡します。

(function() {
    var link = $('link');
    var button = $('button');
    var $this = $(this); // not sure what this is, so will need to be updated

    button.click(function () {
        if (button.data('file', 'day')) {
            $('#day-button').attr('disabled', true);
            $('#night-button').removeAttr('disabled');
            link.attr('href', 'night.css');
        } else {
            $('#day-button').removeAttr('disabled');
            $('#night-button').attr('disabled', true);
            link.attr('href', 'day.css');
        }
    });
})();
于 2012-05-24T22:44:59.523 に答える
0

関数は単独では実行されません。それをドキュメントの準備ができている状態に配置する必要があります（ページが読み込まれると実行されます）。 

$(document).ready(function(){
    (function() {
        var link = $('link');
        var button = $('button');
        var $this = $(this);

        if (button.data('file', 'day').click()) {
            link.attr('href', 'night.css');
            $this.attr('disabled');
            // code to enable night button, not sure how
        }
        else (button.data('file', 'night').click()) {
            link.attr('href', 'day.css');
            $this.attr('disabled');
            // code to enable the day button, not sure how
        }
    })();
});
于 2012-05-24T22:37:03.320 に答える