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的内容，并在3secs之后清空类status2。如果我点击另一个按钮，依此类推。我认为上面的代码可以完成这项工作。如果我在单击按钮时从回调中删除“（）”，则仅发送值“2”，而不会发生其他任何事情。

Answer 1

请勿在{{1}} / ()之后加callbacka。这会调用它们并将callbackb的回调设置为返回值（在您的情况下为$.get）。

undefined

此外，$.get( 'http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka );仅适用于动画。要在delay完成后等待3秒，请在load回调中使用setTimeout。

load

Answer 2

要使其与动态添加的内容一起使用，请使用on

连接您的活动

 $(document).on("click", "#lightson", function () {
    var $status = $('.status2');
    $status.load('status2.php', function() {
        setTimeout(function() { $status.empty(); }, 3000); 
    });
 }

我成功测试了这个，但我认为我不能让ajax负载在小提琴中工作：）

Answer 3

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

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

3 个答案: