Javascript JQuery简单切换不起作用_Javascript_Jquery_Html

Javascript JQuery简单切换不起作用

javascript jquery html

Javascript JQuery简单切换不起作用,javascript,jquery,html,Javascript,Jquery,Html,代码如下： <html> <head> <script src="http://code.jquery.com/jquery.min.js"></script> <script> function showSuccess() { $('#successDiv > p').empty().append("Saving the Device

代码如下：

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script>
            function showSuccess() {
                $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
                $('#successDiv').toggle().delay(4000).toggle();
            }

            $(function () {
                $('#successDiv').on('click', function () {
                    showSuccess();
                })
            });
        </script>
    </head>
    <body>
        <div id="successDiv" style="display:none">
            <p>Hello</p>
        </div>

        <input type="button" id="showSuccess" value="Show Success" />
    </body>
</html>


函数showSuccess（）{
$（'#successDiv>p'）.empty（）.append（“保存设备白名单成功。
服务器响应：成功”）；
$（'#successDiv'）.toggle（）.delay（4000.toggle（）；
}
$（函数（）{
$（'successDiv'）。在（'click'，函数（）{
展示成功（）；
})
});
你好

由于某些原因，切换不起作用

这是你的电话号码

应该是

 $('#showSuccess').on('click', function () {

 $('#successDiv').show(0).delay(4000).hide(0);

及

应该是

 $('#showSuccess').on('click', function () {

 $('#successDiv').show(0).delay(4000).hide(0);

这里是小提琴

这里是工作示例：

$（函数（）{
$（'#showsucture'）。在（'click'，函数（）{
$（'#successDiv>p'）.html（“保存设备白名单成功。
服务器响应：成功”）；
$（'successDiv'）.slideDown（）.delay（4000.slideUp（）；
});
});

如果删除最后一部分

延迟（4000）。切换（）它可以工作
你对这次延误有何反应
顺便说一句，还要将单击事件中的id更改为$（“#showSuccess”）
第一个问题：您将单击绑定到错误的元素；第二：使用delay
时，似乎应该设置显式计时：
function showSuccess() {
    $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
    $('#successDiv').toggle(100).delay(4000).toggle(100);
}

$(function () {
    $('#showSuccess').on('click', showSuccess);
});

函数showSuccess（）{
$（'#successDiv>p'）.empty（）.append（“保存设备白名单成功。
服务器响应：成功”）；
$（'successDiv'）。切换（100）。延迟（4000）。切换（100）；
}
$（函数（）{
$（'showsucture'）。在（'click'，showsucture'）；
});


Upd：计时问题是jQuery的一个限制：
只有队列中的后续事件被延迟；例如，这将
不要延迟.show（）或.hide（）的无参数形式
使用效果队列
（来自delay
）预期的行为是什么？div将显示4秒，然后消失是的。多亏了这一点，链接时是否有必要设置切换时间？这是jQuery要求：>只有队列中的后续事件才会延迟；例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。（明白了）。我添加此注释是为了回答未来的访客。
$('#successDiv').toggle();

function showSuccess() {
    $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess");
    $('#successDiv').toggle(100).delay(4000).toggle(100);
}

$(function () {
    $('#showSuccess').on('click', showSuccess);
});