0

I'm trying to show and hide different blocks of information.

<div id="modLeftCol">
      <div id="cont1Ctn">Content</div>
      <div id="cont2Ctn">Content</div>
      <div id="cont3Ctn">Content</div>
      <div id="cont4Ctn">Content</div>
</div>

To initially show the first choice of content, another function targets the appropriate div by id and jQuery sets the item to block, fades in the opacity and assigns the div the class "modActive" through .addClass(). Thus we get:

<div id="modLeftCol">
      <div id="cont1Ctn">Content</div>
      <div id="cont2Ctn">Content</div>
      <div id="cont3Ctn" class="modActive" style="display: block; opacity: 1;">Content</div>
      <div id="cont4">Content</div>
</div>

To hide the currently visible, I need to target the DIV with the class of "modActive", but using:

$(".modActive").animate({..});
nor
$("div.modActive").animate({..});
nor
$("#modLeftCol > div.modActive").animate({..});

isn't working.I can assign styles to .modActive in the external stylesheet and they target the element no problem.

I can get the script to work by doing $("modLeftCol > div"), but the issue is I get some bugs where it applies the function to all the DIV's in #modLeftCol and it doesn't always remove the "modActive" class. Do I need to use .pushStack()? What would be the correct syntax for that?

Here is my javascript with my problem function at the bottom:

$(document).ready(function() {
        //Initialize DOM Elements       
        var mapCtn = $("#mapModalCtn");
        var cityLink = $('#modRightCol a');
        var allInfoCtn = $('#modLeftCol > div');

        //Show the Map Container
        $(".locBox").delegate("a", "click", function(e) {

            // Initialize info for clicked location
            var initLocInfo = $(this).attr("rel") + "Ctn";
            $('#' + initLocInfo).show().css('opacity','1').addClass('modActive');

            // Initialize Button State on Map
            var initLocBtn = $(this).attr("rel") + "Btn";
            $('#' + initLocBtn).css('backgroundPosition','top');

            // Open Map Box
            mapCtn.show().animate({
                opacity: 1
            }, 500);
            e.preventDefault();
        });

        //Hide the Map Container
        $("#modalTitle").delegate("a", "click", function(e) {
            mapCtn.animate({
                opacity: 0
            }, 500, function() {
                mapCtn.hide();
                allInfoCtn.removeClass('modActive').hide();
                cityLink.css('backgroundPosition','bottom');
            });
            e.preventDefault();
        });

        //Show the info for the selected Location on the Map
        $("#modRightCol").delegate("a", "click", function(e) {
            e.preventDefault();
            var locInfo = $(this).attr("rel") + "Ctn";
            var locBtn = $(this).attr("rel") + "Btn";
            var newCtn = $('#' + locInfo);

            //Change Map Location Button State
            cityLink.css('backgroundPosition','bottom');
            $(this).css('backgroundPosition','top');

            //Hide currently visible information
            if (allInfoCtn.hasClass('modActive')) {

                allInfoCtn.animate({
                    opacity: 0
                }, 1000, function(){
                     allInfoCtn.hide().removeClass("modActive");

                     //Show information related to location clicked
                    newCtn.show().animate({
                            opacity: 1
                        }, 1000, function(){
                            newCtn.addClass('modActive');
                        });
                });
            }


        });

    });
4

1 に答える 1

0

So instead of trying to target the class, I decided to target the element's ID by way of the class and I used the .each() class to load the ID into a variable I could reference instead of doing an if statement.

allInfoCtn.each(function() {
                if($(this).hasClass('modActive')) {
                    visibleCtn = $(this).attr('id');
                } 
            });
于 2012-08-13T22:06:12.717 に答える