Question

请考虑以下代码：

<div id="thediv" >hola</div>
<button id="resharper">button</button>

使用javascript / jQuery：

$("button").on( 'click', function() {
    $("#thediv").show();
    alert('click');
});

$(document).ready(function(){
    $("#thediv").hide();
})

我希望行为首先显示div标签，然后显示警告“Click”。相反，行为以相反的方式起作用。首先显示警报文本，然后显示按钮。我错过了什么吗？

我可以以某种方式修改代码以获得首次显示div的所需行为，然后闪烁警报文本。

Answer 1

检查jQuery.show(options)中是否允许您传递PlainObject个选项。

而且你可以使用complete：一个元素上的动画完成后调用的函数。

代码：

$("button").on( 'click', function() {
    $("#thediv").show({ 
      complete: function() {
        alert('click');
      } 
    });
});

$(document).ready(function(){
    $("#thediv").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

Answer 2

这是因为alert()阻止了UI线程的更新，并且在调用alert()之前该线程还没有时间在DOM中显示该元素。

理想情况下，您应该使用console.log()进行调试，但是可以通过将alert()置于setTimeout()并延迟很短的时间来避免此问题。

＆＃13;

$("button").on( 'click', function() {
    $("#thediv").show();
    setTimeout(function() {
      alert('click');
    }, 10);
});

＆＃13;

#thediv { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

＆＃13;

Answer 3

＆＃13;

$("button").on('click', function() {
  $("#thediv").show("slow", callback);
});

$(document).ready(function() {
  $("#thediv").hide();
})

function callback() {
  alert('click');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>

＆＃13;

将参数添加到.show()

jQuery隐藏并显示在功能端看到的效果

3 个答案: