Question

我正在尝试显示和隐藏不同的信息块。

<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将项设置为block，淡入不透明度并通过.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＆gt; 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');
                        });
                });
            }


        });

    });

Answer 1

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

allInfoCtn.each(function() {
                if($(this).hasClass('modActive')) {
                    visibleCtn = $(this).attr('id');
                } 
            });

无法按jQuery分配的类来定位元素

1 个答案: