FullCalendar という jQuery プラグインを使用してカレンダー アプリを作成しています。カレンダーに表示される 6 週間ごとにタブがあるカレンダーの左側にタブを作成しました。たとえば、マウスを「第 1 週」タブの上に置くと、その月の第 1 週のアジェンダ ビューが表示されます。マウスがタブの上に移動すると週が表示され、マウスがタブを離れると通常の月表示に戻るようにしたかったのです。私はその部分を機能させましたが、実際にタブをクリックしたときに、そのビューにとどまり、月ビューに戻らないようにしたいのです。
正しく動作するマウスオーバーとマウスアウトの部分は次のとおりです。
<script>
$( '#week2' ).mouseover(function() {
$('#week2').css('color', 'white');
$('#week2').week2();
});
$( '#week2' ).mouseout(function() {
$('#week2').weekout();
$('#week2').css('color', 'yellow');
});
</script>
繰り返しになりますが、ユーザーが「week2」タブにマウスを置くだけで、第 2 週の週ビューが表示されます。ユーザーがタブをクリックすると、マウスがタブを離れてもビューにとどまります。
<script>
var x = 0;
$( '#week1' ).click(function() {
var x = 1;
});
$( '#week1' ).mouseover(function() {
$('#week1').css('color', 'white');
$('#week1').week1();
});
$( '#week1' ).mouseout(function() {
if(x < 1) {
$('#week1').weekout();
$('#week1').css('color', 'yellow');
}
else {
null
}
});
</script>
私がやろうとしているのは、ユーザーがタブをクリックした場合に x を 1 に設定して、mouseout() 関数が実行されないようにすることです。しかし、それはとにかく実行されます:(