質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.21%

javascriptで表示が切り替わるボタンの制御を変えたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 336

clovismoment

score 15

前提・実現したいこと

・前提
PHP(Laravel)で実装中のシステム内で
勤務可能時間の申請を行う画面と機能を作っています。

4つのステータスを持つトグルスイッチとして実装していて
デフォルトは「未提出」という表示で
終日可、時間指定、出勤不可、といった3つのステータスに切り替わります。

一度申請した後は
申請したステータスが初期値として入り
修正を行うことができるものです。

そして、未提出に戻すことはできず
一週間以内のステータスに関しては
下位のものに変更ができなくなる制御を入れたいです。
(終日可→時間指定、時間指定→対応不可、終日可→対応不可)

このうち、ステータスが切り替わるところまでは実装ができ
時間指定を選択しているときには、時間の入力が可能なフォームを表示させるところまでは
実装することができました。

・実現したいこと

一週間以内のステータスに関する制御のうち
終日可→時間指定をできなくする制御が抜けているので
それを実装したい。

発生している問題

提出しているステータスのうち
1つだけ制御が抜けてしまっている。

該当のソースコード

/**
 * シフト提出
 */
$(function () {
    $('ul.shift-input li.lp-shift-level-none').on("click", function () {
        setShift($(this));
    });
    $('ul.shift-input li.lp-shift-level-work').on("click", function () {
        setShift($(this));
    });
    $('button#lp-shift-on-off').on("click", function () {
        setShiftOnOff($(this));
    });
});

function setShift(obj) {
    // シフトレベルクリック 待機開始時間を設定

    let date = obj.attr('data-date');
    let hour = obj.attr('data-hour');
    let intHour = parseInt(obj.attr('data-hour'));
    let lastTrain = $('input[name="last_train_time[' + date + ']"]').val();
    let intLastTrain = parseInt(lastTrain.replace(/:/g, ''));

    if (intLastTrain > 1200 && intLastTrain < (intHour * 100)) {
        alert('終電より遅いシフトは、提出できません。');
        return;
    }

    $('li[data-date='+ date +']').each(function () {
        // アイコン付け替え
        let intLiHour = parseInt($(this).attr('data-hour'));
        if ($(this).hasClass('lp-shift-level-locked')) {
            return;
        }
        let setLevel = function (eachObj, level, removeLevel) {
            eachObj.removeClass('lp-shift-level-' + removeLevel);
            eachObj.addClass('lp-shift-level-' + level);
            eachObj.find('span').removeClass('lp-shift-level-' + removeLevel);
            eachObj.find('span').addClass('lp-shift-level-' + level);
        };
        intLiHour >= intHour ? setLevel($(this), 'work', 'none') : setLevel($(this), 'none', 'work');
    });
    $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
}

function setShiftOnOff(obj) {
    // 出勤可不可の設定
    let date = obj.attr('data-date');
    let hour = obj.attr('data-hour');
    let last = obj.attr('data-last');
    let on = obj.attr('data-on');
    let off = obj.attr('data-off');
    let one_week = obj.attr('data-week');
    let off_day = obj.attr('data-offable');

    // ボタンを押したときの動作
    if (obj.hasClass('btn btn-secondary btn-sm') | obj.hasClass('btn btn-danger btn-sm') | (obj.hasClass('btn btn-info btn-sm') & !one_week & !off_day)){
        //     未提出or出勤不可→終日(1週間以内の場合は出勤不可にできない)
        obj.removeClass('btn btn-secondary btn-sm');
        obj.removeClass('btn btn-danger btn-sm');
        obj.removeClass('btn btn-info btn-sm');
        obj.addClass('btn btn-primary btn-sm');
        $('button[name="shift_on_off[' + date + ']"]').html("終日</br>可");
        $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
        $('input[name="last_train_time[' + date + ']"]').val(last + ':00');
        $('input[name="shift_on_off[' + date + ']"]').val(on);
        $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show();
        $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show();
    } else if (obj.hasClass('btn btn-primary btn-sm')){
        // 終日可→時間入力
        obj.removeClass('btn btn-primary btn-sm');
        obj.addClass('btn btn-info btn-sm');
        $('button[name="shift_on_off[' + date + ']"]').html("時間</br>入力");
        $('input[name="stand_by_time[' + date + ']"]').attr('type', 'time');
        $('input[name="last_train_time[' + date + ']"]').attr('type', 'time');
        $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
        $('input[name="last_train_time[' + date + ']"]').val(hour + ':00');
        $('input[name="shift_on_off[' + date + ']"]').val(on);
        $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide();
        $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide();
    } else {
        // 時間入力→出勤不可
        obj.removeClass('btn btn-info btn-sm');
        obj.addClass('btn btn-danger btn-sm');
        $('#input_time[' + date + ']').hide();
        $('button[name="shift_on_off[' + date + ']"]').html("出勤</br>不可");
        $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
        $('input[name="last_train_time[' + date + ']"]').val(hour + ':00');
        $('input[name="shift_on_off[' + date + ']"]').val(off);
        $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide();
        $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide();
    }
}

試したこと

else ifに下記を追加してみたが挙動が変わらなかった

    } else if (obj.hasClass('btn btn-primary btn-sm') & !one_week & !off_day){
        obj.removeClass('btn btn-secondary btn-sm');
        obj.removeClass('btn btn-danger btn-sm');
        obj.removeClass('btn btn-info btn-sm');
        obj.addClass('btn btn-primary btn-sm');
        $('button[name="shift_on_off[' + date + ']"]').html("終日</br>可");
        $('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
        $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
        $('input[name="last_train_time[' + date + ']"]').val(last + ':00');
        $('input[name="shift_on_off[' + date + ']"]').val(on);
        $('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show();
        $('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show();        

補足情報(FW/ツールのバージョンなど)

PHP7系
Laravel5系です

このjsを利用しているviewは下記となります
https://ideone.com/ZhBAXA

利用しているビューコンポーザーは下記です

https://ideone.com/Qt8EGL

文字数オーバーしてしまったので外部に切り出しました。

宜しくお願い足します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/02/26 11:19

    コードはマークダウンのcode機能を利用してご提示ください。
    https://teratail.com/help#about-markdown
    また、提示コードにはLaravelはおろかPHPがどのように絡んでくるかが分かりません。

    キャンセル

  • clovismoment

    2019/02/26 11:37

    質問に不備があり、大変失礼いたしました。
    修正致しました。

    キャンセル

  • moredeep

    2019/02/26 18:04

    >// 未提出or出勤不可→終日(1週間以内の場合は出勤不可にできない)
    これの意味が解らないです。"終日に変更する"というコメントの後に、"出勤不可にできない"とは?
    >else ifに下記を追加してみたが挙動が変わらなかった
    これってelse if を書き換えたって意味であってますか?それともelse if ブロックをそのまま追加しましたか?
    とりあえず、ブラウザの開発者デバッグで、one_weekとかのif文の条件の値を確認するところから始めたほうがよろしいのではないでしょうか。

    これは質問に関係ありませんが、クラスbtnとbtn-smはいちいち削除して追加しなくていいはずです。
    obj.removeClass('btn btn-info btn-sm');→obj.removeClass('btn-info');
    これだけでも多少はif文が見易くなるでしょうし、文字数が減れば誤字脱字を減らせます。

    キャンセル

回答 1

+4

| ⇒ || 、& ⇒ && 

【論理演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/26 11:47

    制御をかける、ということには成功しています・・・。

    キャンセル

  • 2019/02/26 11:51

    コードが間違っていることを指摘しているので、「うごいくもん!」と言われても。
    「|」「&」それぞれ単体で使うとビット演算子になり、組み合わせによっては動いているように見えるかもしれませんね。

    【ビット演算子 - JavaScript | MDN】
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる