0

我试图显示和隐藏不同的信息块。

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

为了最初显示内容的第一个选择，另一个函数通过 id 定位适当的 div，jQuery 将项目设置为阻塞，淡入不透明度并通过 .addClass() 为 div 分配“modActive”类。因此我们得到：

<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>

要隐藏当前可见，我需要使用“modActive”类来定位 DIV，但使用：

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

不工作。我可以在外部样式表中为 .modActive 分配样式，并且它们以元素为目标没有问题。

我可以通过 $("modLeftCol > div") 使脚本工作，但问题是我遇到了一些错误，它将函数应用于#modLeftCol 中的所有 DIV，并且它并不总是删除“modActive”类. 我需要使用 .pushStack() 吗？什么是正确的语法？

这是我的javascript，底部有我的问题函数：

$(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

因此，我没有尝试以类为目标，而是决定通过类来定位元素的 ID，并使用 .each() 类将 ID 加载到我可以引用的变量中，而不是执行 if 语句。

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