Jquery：使用load（）生成它们之后隐藏（）和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

在HTML中将它们设置为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")