0

我有两段代码，首先我有我的代码，它使用包含的关闭按钮打开一个 div：

http://jsfiddle.net/spadez/uhEgG/27/

$(document).ready(function () {


    $('#country').click(function () {
        $("#country_slide").slideToggle();
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

});

然后我还有我的 Ajax 代码，它被设计为在 div 打开时触发：

$(function () {
    $('#country_link').on('click', function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
                $('.loader').show();
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
//                $("#country_slide").hide('fast');
//                alert('request failed');                
            },
            complete: function () {
                $('.loader').hide();
            },
        });
        return false;
    });
});

我现在坚持的是，如何让 ajax 只在 div 打开时执行？因为我正在使用切换和关闭按钮，所以似乎很难弄清楚点击在做什么，无论是打开还是关闭。

我想我的选择是有某种标志或者有一些“如果”代码，所以如果类等于 .hidden 则不要执行。我无法集成这些解决方案中的任何一个，我不确定它们中的任何一个是否是实现这一目标的正确方法。

4

3 回答 3

1

此代码添加data到元素中，以在您下次单击它时检查它是否已经加载。

目前我无法对其进行测试，因此它可能包含错误。

$(function () {
    $('#country_link').on('click', function (e) {
        // Prevent from following the link, if there is some sort of error in
        // the code before 'return false' it would still follow the link.
        e.preventDefault();

        // Get $link because 'this' is something else in the ajax request.
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true)
            return false;

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
                $('.loader').show();
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
//                $("#country_slide").hide('fast');
//                alert('request failed');
            },
            complete: function () {
                $('.loader').hide();
            },
        });
    });
});
于 2013-06-06T14:25:17.583 回答
1

包括检查作为幻灯片功能的一部分：

$("#country_slide").slideToggle(function() {
    if ($(this).is(":visible")) {
        alert("im visible!");
    }
});

演示：http: //jsfiddle.net/tymeJV/uhEgG/28/

于 2013-06-06T14:09:34.757 回答
1 
if($("#country_slide").is(":visible")) 
  //call ajax
于 2013-06-06T14:07:47.153 回答