javascript - JavaScriptが機能せず、修正方法がわからない

Question

このjsを正しく動作するように修正するにはどうすればよいか疑問に思います。別のセクションを表示するセクションを非表示にし、「オフ？」の場合は時間のテキストボックスを無効にします。チェックボックスがオンになっています。非表示/表示/無効化の部分は機能しますが、タイムピッカーは機能しません。コーディングの日付ピッカー部分を追加する前に、なぜそれが機能しないのかを理解しようとしています...

とにかく、これが私が参照している部分の私のコードです...

    <link rel="stylesheet" type="text/css" href="includes/css/adm.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="includes/js/timepicker.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script>
$("#tstart").timepicker({
timeFormat: "hh:mm tt",
stepMinute: 15,
minuteGrid: 15,
hourMin: 6,
hourMax: 16
});
</script>

<script>
$("#tend").timepicker({
timeFormat: "hh:mm tt",
stepMinute: 15,
minuteGrid: 15,
hourMin: 11,
hourMax: 23
});
</script>

<script type="text/javascript"> 
function fields(){ 
    if (document.getElementById('working').checked == 1){ 
    document.getElementById('tstart').disabled='disabled'; 
    document.getElementById('tend').disabled='disabled'; 
    document.getElementById('type').style.display = 'none';
    document.getElementById('type').style.visibility = 'hidden';
    document.getElementById('off').style.display = 'inline'; 
    document.getElementById('off').style.visibility = 'visible';
    }else{ 
    document.getElementById('tstart').disabled=''; 
    document.getElementById('tend').disabled=''; 
    document.getElementById('type').style.display = 'inline';
    document.getElementById('type').style.visibility = 'visible';
    document.getElementById('off').style.display = 'none'; 
    document.getElementById('off').style.visibility = 'hidden';
    }
}
</script>

<td class="add_hours_left_top">Date:&nbsp;</td>
                <td class="add_hours_right_top">
                    <input type="text" name="date" id="date" size="22" value="">
                    <input type="hidden" name="work" value="0">
                    <input type="checkbox" title="Check if off work!" name="work" id="working" value="1" onclick="fields();" />Off?
                </td>
            </tr>
            <tr>
                <td class="add_hours_left">Hours:&nbsp;</td>
                <td class="add_hours_right">
                    <input type="text" name="timestart" id="tstart" size="10" value=""> to 
                    <input type="text" name="timeend" id="tend" size="10" value="">
                </td>
            </tr>
            <tr>
                <td class="add_hours_reason_select" colspan="2" id="type">
                    <div class="add_hours_type_name">Type of work to be done:</div>
                    <input type="hidden" name="work_type" value="0" checked />
                    Temps <input type="radio" name="work_type" value="1" /><b>&middot;</b>&nbsp;
                    Scrub Floors <input type="radio" name="work_type" value="2"/></br>
                    Leave Early or Later <input type="radio" name="work_type" value="3"/><b>&middot;</b>&nbsp;
                    Training <input type="radio" name="work_type" value="4"/></br>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="add_hours_reason_select" colspan="2" id="off" style="display:none;">
                <div class="add_hours_type_name">Reason off work:</div>
                    <input type="hidden" name="why_off" value="0" checked />
                    Request <input type="radio" name="why_off" value="1" /><b>&middot;</b>&nbsp;
                    Medical Leave <input type="radio" name="why_off" value="2"/></br>
                    </label>
                </td>

助けてくれてありがとう！

score 0 · Accepted Answer

見積もりOP：

「...しかし、タイムピッカーは機能しません。なぜ機能しないのかを理解しようとしています...」

DOM Readyハンドラーがないと、タイムピッカー初期化メソッドが呼び出されたときにHTML要素がまだ存在しないため、コードは機能しません。DOM Ready関数は、メソッドが起動される前にDOMが完全に構築されることを保証します。.timepicker()

コードをDOM対応関数でラップすると、タイムピッカーがうまく機能します。

デモ：http：//jsfiddle.net/nHAcA/2/

$(document).ready(function () {  // <-- use a DOM Ready handler function

    $("#tstart").timepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 15,
        minuteGrid: 15,
        hourMin: 6,
        hourMax: 16
    });

    $("#tend").timepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 15,
        minuteGrid: 15,
        hourMin: 11,
        hourMax: 23
    });

    function fields() {
        if (document.getElementById('working').checked == 1) {
            document.getElementById('tstart').disabled = 'disabled';
            document.getElementById('tend').disabled = 'disabled';
            document.getElementById('type').style.display = 'none';
            document.getElementById('type').style.visibility = 'hidden';
            document.getElementById('off').style.display = 'inline';
            document.getElementById('off').style.visibility = 'visible';
        } else {
            document.getElementById('tstart').disabled = '';
            document.getElementById('tend').disabled = '';
            document.getElementById('type').style.display = 'inline';
            document.getElementById('type').style.visibility = 'visible';
            document.getElementById('off').style.display = 'none';
            document.getElementById('off').style.visibility = 'hidden';
        }
    }

});

DOM Ready関数を削除し、jsFiddleでDOM Readyを無効にすると、タイムピッカーは機能しなくなります：http： //jsfiddle.net/nHAcA/3/

続きを読む： http ：//api.jquery.com/ready/

ボーナスポイント：

jQueryを使用しているので、インライン関数を削除してjQuery メソッドonclickに置き換えます。参照： http： //jsfiddle.net/nHAcA/4/on()

$('#working').on('click', function () {
    if (document.getElementById('working').checked == 1) {
        document.getElementById('tstart').disabled = 'disabled';
        document.getElementById('tend').disabled = 'disabled';
        document.getElementById('type').style.display = 'none';
        document.getElementById('type').style.visibility = 'hidden';
        document.getElementById('off').style.display = 'inline';
        document.getElementById('off').style.visibility = 'visible';
    } else {
        document.getElementById('tstart').disabled = '';
        document.getElementById('tend').disabled = '';
        document.getElementById('type').style.display = 'inline';
        document.getElementById('type').style.visibility = 'visible';
        document.getElementById('off').style.display = 'none';
        document.getElementById('off').style.visibility = 'hidden';
    }
});

また、jQueryでは...

document.getElementById('off')で置き換えることができます$('#off')

と...

document.getElementById('off').style.display = 'none';

に置き換えることができます...

$('#off').css('display','none');

と...

document.getElementById('off').style.display = 'none';
document.getElementById('off').style.visibility = 'hidden';

すべてを置き換えることができます...

$('#off').css({
    'display': 'none',
    'visibility': 'hidden'
});

または、代わりにjQueryhide()メソッドを試してみることもできます。

$('#off').hide();

と同じdisplay: noneです。visibility: hiddenを使用している場合は不要ですdisplay: none。後者も要素にゼロサイズを与え、フローからそれを取り除くので、その可視性を奪うことは無意味です...それはすでになくなっています。

次に、jQuery.show()メソッドを使用して要素を元に戻します。

$('#off').show();

ドキュメントによると、「これは、displayプロパティが最初の状態に復元されることを除いて、を呼び出すのとほぼ同じです。要素の表示値が、の場合、非表示にして表示すると、再び表示されます。」.css('display', 'block')inlineinline

jQuery.css()ドキュメント、jQuery.prop()ドキュメント、およびjQueryセレクタードキュメントも参照してください。

あなたはアイデアを得る...

$('#working').on('click', function () {
    if ($(this).prop('checked')) {
        $('#tstart').prop('disabled',true);
        $('#tend').prop('disabled',true);
        $('#type').hide();
        $('#off').show();
    } else {
        $('#tstart').prop('disabled',false);
        $('#tend').prop('disabled',false);
        $('#type').show();
        $('#off').hide();
    }
});

更新されたデモ：http： //jsfiddle.net/nHAcA/6/

javascript - JavaScriptが機能せず、修正方法がわからない

1 に答える 1

Related

Reference