Question

当我点击按钮时我想显示图像并在完成图像后隐藏。我的剧本错了吗？

<script type="text/javascript">

$(element).click(function(){
    $(".navigation-jpg").show();
    $.ajax({
        success: function(){
            $(".navigation-jpg").hide();
        }
    });
});
</script>

<div class="ajax-content">

    <img src="navigation.jpg" alt="Loading" class="loading-gif" style="display:none"/>
    <div class="ajax-response">
    </div>
            <asp:Button ID="Button1" runat="server" Text="Button" />

       </div>

Answer 1

您在javascript中使用了课程navigation-jpg，但在HTML中使用了课程loading-gif。保持一致，你就是好人。

更新：其他回复者也在事件处理程序中使用了$(element)而不是$('#Button1) - 希望确保我的不完整答案已更新。

更新＃2：但又找到了另一个问题。在DOM中找到HTML之前，将附加javascript事件处理程序。结果是不会附加事件处理程序。将javascript移动到HTML元素下面或将javascript代码包装在jQuery document.ready代码中，如下所示：

$( document ).ready(function() {
    // your js code here
});

更新＃3： ajax调用本身没有足够的属性来实际进行ajax调用。以下是您可能想要遵循的示例。您需要至少添加类型和网址。如果要传递参数，则需要数据。

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: success
});

更新＃4：以下是一个更完整的代码段，可以指导您修复：

<script type="text/javascript">

// execute the javascript action after the entire DOM has been loaded
$( document ).ready(function() {

    // hide the image initially
    $(".loading-gif").hide();

    // attach the handler to the button
    $('#Button1').click(function () {
        $(".loading-gif").show();

        // provide enough information to the ajax function to make a call
        $.ajax({
            type: "POST",
            url: "some-other-page.html",
            success: function () {
                $(".loading-gif").hide();
            }
        });
    });
});
</script>

<div class="ajax-content">
    <img src="http://localhost:2169/Image/Icon/loading.gif" alt="Loading" class="loading-gif" />
    <div class="ajax-response">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
</div>

Answer 2

您正在寻找.navigation-jpg类作为选择器，而实际上是.loading-gif。而且我猜你实际上并没有留下$(element).click...，你会用正确的元素选择器替换它吗？

$('#Button1').click(function(){
    $(".loading-gif").show();
    $.ajax({
        success: function(){
            $(".loading-gif").hide();
        }
    });
});

ajax进度条图像隐藏和显示

2 个答案: