Question

想知道如何修复此js才能正常工作。我隐藏了一个部分来显示另一个部分，如果“关闭”，也会禁用小时文本框。复选框已选中。隐藏/显示/禁用部分有效，但时间戳不起作用。我试图弄清楚为什么它在我尝试添加编码的datepicker部分之前没有工作......

无论如何，这是我所指的部分的代码......

    <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>

感谢您的帮助！

Answer 1

引用OP：

“......但是时间戳不起作用。我正在试图找出它的原因不工作......“

如果没有DOM就绪处理程序，代码将无法工作，因为在调用时间选择器初始化方法时，HTML元素尚不存在。 DOM ready函数确保在触发.timepicker()方法之前完全构造DOM 。

当您将代码包装在DOM ready function中时，您的时间选择器效果很好。

DEMO：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就绪，那么时间选择器就会停止工作：http://jsfiddle.net/nHAcA/3/

了解详情：http://api.jquery.com/ready/

加分：

由于您正在使用jQuery，因此请删除内联onclick函数并将其替换为jQuery on() method。请参阅：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' });

或者您可能想尝试the jQuery hide() method。

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

与display: none相同。当您使用visibility: hidden时，display: none是多余的。由于后者也赋予元素零大小并将其从流程中移除，因此消除其可见性毫无意义......它已经消失了。

然后使用the jQuery .show() method将元素带回来。

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

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

另请参阅jQuery .css() docs，jQuery .prop() docs和jQuery Selectors docs。

你明白了......

$('#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无法正常工作，想知道如何修复

1 个答案: