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

引用操作：

“......但是时间选择器不起作用。我试图弄清楚它为什么不起作用......”

如果没有 DOM 就绪处理程序，代码将无法工作，因为在调用时间选择器初始化方法时 HTML 元素还不存在。DOM 就绪函数可确保在触发方法之前完全构造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 就绪功能并在 jsFiddle 中禁用 DOM 就绪，时间选择器就会停止工作：http: //jsfiddle.net/nHAcA/3/

阅读更多： http ://api.jquery.com/ready/

奖励积分：

由于您使用的是 jQuery，因此请摆脱您的内联onclick函数并将其替换为jQueryon()方法。见：http: //jsfiddle.net/nHAcA/4/

$('#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();

根据文档：“这大致相当于调用.css('display', 'block')，除了显示属性恢复到最初的状态。如果元素的显示值为inline，则隐藏并显示，它将再次显示inline。”

另请参阅jQuery.css()文档、jQuery.prop()文档和jQuery Selectors 文档。

你明白了....

$('#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