6

ページで一連の「クリック」イベントの For ループを作成したいと考えています。Day ボタンをクリックすると、その日に割り当てられたイベントが div ボックスに表示されるタイムテーブルを作成しています。
HTML

<div class="cwt-buttons">
<a id="cwt-button1">Monday</a>
<a id="cwt-button2">Tuesday</a>
<a id="cwt-button3">Wednesday</a>
<a id="cwt-button4">Thursday</a>
<a id="cwt-button5">Friday</a>
<a id="cwt-button6">Saturday</a>
<a id="cwt-button7">Sunday</a>
</div>

<div id="cwt-timetable">
<div class="current">Housework</div>
<div class="cwt-Day1">Kickboxing</div>
<div class="cwt-Day2">Homework</div>
<div class="cwt-Day3">Yoga</div>
<div class="cwt-Day4">Eating</div>
<div class="cwt-Day5">Fasting</div>
<div class="cwt-Day6">Running</div>
<div class="cwt-Day7">Funeral</div>
</div>

JS

$(function() {
    for ( var i = 1; i < 8; i++ ) {
        var clickedButton = $("#cwt-button"+i);
        $(clickedButton).click(function() {
        var currentDay = $('#cwt-timetable div.current');
        var selectedDay = $('#cwt-timetable div.cwt-Day'+i);
        currentDay.removeClass('current').addClass('previous');
        (selectedDay).css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            currentDay.removeClass('previous');
        });     
    })
    }
});

たとえば、正確な値がある場合、JavaScript は正常に機能"#cwt-button1"
します。ループ内で「i」カウンターを連結すると機能しません。

誰かが私が間違っているところを見ることができますか? それとも、JavaScript が処理できないことをしているのですか?

4

1 に答える 1

2

これは、1 日に何度も尋ねられる古い問題とまったく同じです。ループで作成されたすべての関数は同じ変数スコープで作成されるため、同じ変数を共有しiます。

変数のスコープを設定するには、関数呼び出しが必要です。jQuery$.each()はこれを行う便利な方法です。

$(function () { // -----------v-----scoped to the function
    $.each(Array(7), function(i) {
        var clickedButton = $('#cwt-button' + (++i));

        $(clickedButton).click(function () {
            var currentDay = $('#cwt-timetable div.current');

            // --------using scoped `i`------------------------v
            var selectedDay = $('#cwt-timetable div.cwt-Day' + i);
            currentDay.removeClass('current').addClass('previous');
            (selectedDay).css({
                opacity: 0.0
            }).addClass('current').animate({
                opacity: 1.0
            }, 1000, function () {
                currentDay.removeClass('previous');
            });
        });
    });
});
于 2013-09-16T02:42:34.907 に答える