Элементы Jquery: Hide () и Show () после генерации их с помощью load () - PullRequest
Новая
       15

Элементы Jquery: Hide () и Show () после генерации их с помощью load ()

0 голосов
/ 03 апреля 2012

Вот мой код: 

$(".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);  

        };


    });

Ответы [ 3 ]

3 голосов
/ 03 апреля 2012

Установите их как display: none в HTML, и они не будут отображаться (даже кратко) при загрузке. Более поздние методы .show() все равно будут отображать их.

1 голос
/ 03 апреля 2012

Несколько проблем с вашим кодом.

Прежде всего, ваш синтаксис нарушен (я полагаю, потому что вы вырезали некоторый код для краткости).

Кроме этого, вы пытаетесь манипулировать элементами, которые не существуют, когда создается DOM.У вас должны быть все элементы, которые вы хотите скрыть заранее, вы можете использовать: 

.explication {
    display: none;
}

Затем активировать их, чтобы показать событие, используя метод $.on(). 

$(document).on('click', 'someSelector', function() {        
    $('.someOtherSelector').show();
});
0 голосов
/ 03 апреля 2012

Вы можете попытаться установить $("YourElement").css("opacity","0") или $("YourElement").css("visibility","hidden") или $("YourElement").css("display","none")

...