Jquery :使用load()生成Hide()和Show()元素之后

Question

下面是我的代码：

$(".feat").click(function () {
    $('#content').empty();

    $('#content').load('loaded/features.html', function() {
    $('.expla').hide();
    $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
    $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
    $('.w1,.w2,.w3,.w4,.w5,.w6').hide();
});

下面是features.html，但它并不相关：

    <div id="eruscont">
        <div id="erustyle">What I can do !</div>
        <div id="undercore">
            <div id="grinder">
            <div class="title grinder plus"><p>Grinder&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div>
        </div>
            <div id="flyer">
            <div class="title flyer plus"><p>Flyer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div>
        </div>
            <div id="whack">
            <div class="title whack plus"><p>WHack &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div>
        </div>
        </div><!-- Fin undercore -->
    </div><!-- Fin eruscont -->
<div id="schema"><div id="mainstuff"><p>Browse my main options, and you'll see what I'm able to do for you !</div>
    <div class="expla egrinder">
        <div class="explication g1">Define a path and kill mobs</div>
        <div class="explication g2">Smart movement/path system</div>
        <div class="explication g3">Loots, skins, gathers using ground mount</div>
        <div class="explication g4">Sells, buys, repairs, mails stuff</div>
        <div class="explication g5">Automatic spell casting highly customizable</div>
        <div class="explication g6">Computer still available for use when running</div>
    </div>
    <div class="expla eflyer">
        <div class="explication f1">Define a path and gather resources</div>
        <div class="explication f2">Kills, loots, skins, mines, Herbs</div>
        <div class="explication f3">Uses flying mount and Swiming mount</div>
        <div class="explication f4">Sells, buys, repairs, mails stuff</div>
        <div class="explication f5">Analyzes your skill level and pick up what you can have</div>
        <div class="explication f6">Computer still available for use when running</div>
    </div>
    <div class="expla ewhack">
<div class="explication w1">Use your character differently</div>
<div class="explication w2">Fly hack, Water Walk, Wall walk</div>
<div class="explication w3">Removes collision, AFK, falling and Lua protection</div>
<div class="explication w4">Auto Loot, Auto kick, tracking and morpher</div>
</div>        
</div>

.expla .g1 ...，f1...，w1...是位于features.html中的元素。但是它们不会被hide()方法隐藏，而且在后面的代码中，我使用show()方法来使这些元素在不同的事件中出现。

我猜问题是因为load()的结果没有添加到DOM中。但我不知道该如何管理它。我不太擅长使用jquery。

你能帮我吗？

感谢您的阅读！

编辑:我错了，隐藏效果起作用了，我只是瞄准了错误的元素。但是，在加载的元素不可用之后，我的意思是，例如，这不起作用：

if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible'))
            {
                $('.expla').hide();
                $('#mainstuff').hide();
                $('.flyer img').attr({src: "image/add.png" });
                $('.whack img').attr({src: "image/add.png" });
                $('.flyer','.whack').addClass('plus');
                $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
                $('.w1,.w2,.w3,.w4,.w5,.w6').hide();
                $('.grinder').removeClass('plus');
                $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
                $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});   
                $('.grinder img').attr({src: "image/minus.png" });
                return false;
            }

这段代码位于另一个js文件中，由于缺乏优化，它确实很混乱，但它工作正常，如果你想看看它有多复杂，这里是整个页面：

$(document).ready(function()
{
    $('.expla').hide();
    $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
    $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
    $('.w1,.w2,.w3,.w4,.w5,.w6').hide();

        // run the currently selected effect

    $(".grinder img").click(function () {
        if($('.grinder').hasClass('plus'))
        { 
            if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible'))
            {
                $('.expla').hide();
                $('#mainstuff').hide();
                $('.flyer img').attr({src: "image/add.png" });
                $('.whack img').attr({src: "image/add.png" });
                $('.flyer','.whack').addClass('plus');
                $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
                $('.w1,.w2,.w3,.w4,.w5,.w6').hide();
                $('.grinder').removeClass('plus');
                $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
                $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});   
                $('.grinder img').attr({src: "image/minus.png" });
                return false;
            }
            else
            {
                $('#mainstuff').hide();
                $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
                $('.grinder').removeClass('plus');
                $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});   
                $('.grinder img').attr({src: "image/minus.png" });
                return false;
            }   
        }
        else    
        {
            $('.grinder img').attr({src: "image/add.png" });
            $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
            $('.expla.egrinder').hide("explode", 1500);
            $('.grinder').addClass('plus');     
            return false;
        }



    });

    $(".flyer img").click(function () {
        if($('.flyer').hasClass('plus'))
        {
            if($('.expla.egrinder').is(':visible') || $('.expla.ewhack').is(':visible'))
            {
                $('.expla').hide();
                $('#mainstuff').hide();
                $('.grinder img').attr({src: "image/add.png" });
                $('.whack img').attr({src: "image/add.png" });
                $('.grinder','.whack').addClass('plus');
                $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
                $('.w1,.w2,.w3,.w4,.w5,.w6').hide();
                $('.flyer').removeClass('plus');
                $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
                $('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function () { callback("f")}); 
                $('.flyer img').attr({src: "image/minus.png" });
                return false;
            }
            else
            {
                $('#mainstuff').hide();
                $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
                $('.flyer').removeClass('plus');
                $('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function () { callback("f")}); 
                $('.flyer img').attr({src: "image/minus.png" });
                return false;
            }   
        }
        else    
        {
            $('.flyer img').attr({src: "image/add.png" });
            $('.expla.eflyer').hide("explode", 1500);
            $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
            $('.flyer').addClass('plus');   
            return false;
        }
    });

    $(".whack img").click(function () {
        if($('.whack').hasClass('plus'))
        {
            if($('.expla.egrinder').is(':visible') || $('.expla.eflyer').is(':visible'))
            {
                $('.expla').hide();
                $('#mainstuff').hide();
                $('.grinder img').attr({src: "image/add.png" });
                $('.flyer img').attr({src: "image/add.png" });
                $('.grinder','.flyer').addClass('plus');
                $('.g1,.g2,.g3,.g4,.g5,.g6').hide();
                $('.w1,.w2,.w3,.w4').hide();
                $('.whack').removeClass('plus');
                $('.f1,.f2,.f3,.f4,.f5,.f6').hide();
                $('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function () { callback("w")}); 
                $('.whack img').attr({src: "image/minus.png" });
                return false;
            }
            else
            {
                $('#mainstuff').hide();
                $('.w1,.w2,.w3,.w4').hide();
                $('.whack').removeClass('plus');
                $('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function () { callback("w")}); 
                $('.whack img').attr({src: "image/minus.png" });
                return false;
            }   
        }
        else    
        {
            $('.whack img').attr({src: "image/add.png" });
            $('.expla.ewhack').hide("explode", 1500);
            $('.w1,.w2,.w3,.w4').hide();
            $('.whack').addClass('plus');   
            return false;
        }
    });


    // Grinder callbacks
    // Flyer callbacks
    //WHack callbacks       

        function callback(xlol) {
            var pif = "."+xlol+"1";
            var arg = xlol;
            $(pif).show("slide", 200, function () { call2(arg)});
        };

        function call2(xlol) {
            var pif = "."+xlol+"2";
            var arg = xlol;
            $(pif).show("slide", 200,function () { call3(arg)});    
        };      

        function call3(xlol) {
            var pif = "."+xlol+"3";
            var arg = xlol;
            $(pif).show("slide", 200,function () { call4(arg)});    

        };      
        function call4(xlol) {
            var pif = "."+xlol+"4";
            var arg = xlol;
            $(pif).show("slide", 200,function () { call5(arg)});    

        };      
        function call5(xlol) {
            var pif = "."+xlol+"5";
            var arg = xlol;
            $(pif).show("slide", 200,function () { call6(arg)});    

        };      
        function call6(xlol) {
            var pif = "."+xlol+"6";
            $(pif).show("slide", 200);  

        };


    });

Answer 1

在超文本标记语言中将它们设置为display: none，它们将不会在加载时显示(即使是短暂的)。以后的.show()方法仍然会显示它们。

Answer 2

你的代码有几个问题。

首先，您的语法是错误的(我假设是因为您为了简洁而删减了一些代码)。

除此之外，您正在尝试操作在创建DOM时不存在的元素。你应该预先准备好所有你想要隐藏的元素，你可以使用：

.explication {
    display: none;
}

然后使用$.on()方法触发它们在事件上显示。

$(document).on('click', 'someSelector', function() {        
    $('.someOtherSelector').show();
});

Answer 3

您可以尝试设置$("YourElement").css("opacity","0")、$("YourElement").css("visibility","hidden")或$("YourElement").css("display","none")