jquery - 我的 jQuery 排队函数在第一次后无法运行

Question

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>

<script type="text/javascript">
$('#lightson').click( function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka(){
        $('.status2').load('status2.php').delay(3000).queue(function() {
            $(this).empty();
        });
    }
});

$( '#lightsoff' ).click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
        $('.status2').load('status3.php').delay(3000).queue(function() {
            $(this).empty();
        });
    } 
});
</script>

当我点击 lightson 时，我想将一些内容加载到我的 div 中，并在三秒后将其清空。另外，当我单击 Lightsoff 时，我想加载其他内容，并在三秒后清空它，因为两个按钮使用相同的 div。

此代码只能运行一次。当我的页面加载并单击两个按钮之一(哪个按钮无关紧要)时，它会起作用，但是如果我单击另一个按钮，它会加载 div 中的信息，但不为空它。

我目前有效的新代码是:

<input id='lightson' class="buttonl" type="button" value="On" />
<input id='lightsoff'  class="buttonl" type="button" value="Off" />
<p class="status2"></p>

<script type="text/javascript">
$('#lightson').click(function(){
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka());
    function callbacka() {
        $('.status2').load('status2.php').delay(3000).queue(function(){
            $('.status2').empty().dequeue();
        });
    }
});

$('#lightsoff').click( function () {
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb());
    function callbackb(){
       $('.status2').load('status3.php').delay(3000).queue(function() {
           $('.status2').empty().dequeue();
       });
    } 
});
</script>

我想要的上述代码的描述:我有两个按钮。当我单击其中之一时，我想将值“2”发送到 url 并在类 status2 中加载 status2.php 的内容，并在 3 秒后清空类 status2。如果我单击另一个按钮，依此类推。我认为上面的代码可以完成这项工作。 如果我在单击按钮时从回调中删除“()”，则仅发送值“2”，而不会发生其他任何情况。

Answer 1

不要将()放在callbacka/callbackb之后。这会调用它们并将 $.get 的回调设置为返回值(在您的情况下为 undefined)。

$.get( 'http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka );

此外，延迟仅适用于动画。要在 load 完成后等待 3 秒，请在 load 回调中使用 setTimeout。

$('.status2').load('status2.php', function() {
    var $this = $(this);
    setTimeout(function(){
       $this.empty();
    }, 3000);
});