javascript - 如何循环 .attr() 单击时更改？

Question

所以我已经被困了一段时间了..

我正在尝试建立一个系统，其中用户有 3 个按钮，每个按钮都会显示 3 个 div 中的 1 个。有一个检查，当前打开的窗口的相应按钮会更改其类以更改其背景颜色 - 因此很容易看到打开的选项。

然后单击不同的按钮会加载不同的内容，但保持窗口打开 - 这有效

单击同一个按钮两次将关闭窗口并重新设置按钮类 - 这有效

这应该能够重复 - 但它不会..

我可以加载相应的窗口，更改其按钮类。关闭该窗口并将类重置为其原始状态，但是当我尝试再次打开同一窗口时，该类不会再次更改。它不会重复这个过程..

除非您重新打开另一个窗口，在这种情况下它会重新启动并工作直到同一点...

super 困惑，看不到这里发生了什么。

感谢任何帮助!!

$(document).ready(function(){ 
    $('#findUs').click(function(){

        if($('.findUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#findUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#findUs').attr('class','selectedContact');
                    $('#phoneUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');


        $('.infoDropdown').load('global/contactOptions.php .findUs',{},function(){

            if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");
                }

                });

            });


//------------------------------------phone------------------------------------------
    $('#phoneUs').click(function(){

            if($('.phoneUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#phoneUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle('slow');
                return false;
        }
                    $('#phoneUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .phoneUs',{},function(){

                if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");

                }
                });
        });
//------------------------------------Fax--------------------------------------------
    $('#faxUs').click(function(){

            if($('.faxUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#faxUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#faxUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#phoneUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .faxUs',{},function(){

                if($('.infoDropdown').is(":hidden")){
                    $('.infoDropdown').slideToggle("slow");

                }
        });
    });

});

==============================主要html================== ===================

 <div align="center" >
            <span class="contactTitle" id="findUs">Find Us:</span>
            <span class="contactTitle" id="phoneUs">Phone Us:</span>
            <span class="contactTitle" id="faxUs">Fax Us:</span>
        </div>

        <div class="infoDropdown">
        </div>

============================从单独页面加载的div================ =============

    <div class="findUs" name="findUs">
dfgdfg
        </div>

        <div  class="phoneUs" name="phoneUs">
        test
        </div>


        <div  class="faxUs" name="faxUs">
        123
        </div>

========================================CSS========== =================================

<style>
.infoDropdown{
    display:none;
    height:250px;
    margin-top:5px;
    background-color:rgba(33,252,0,1.00);
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
}
.contactTitle{  
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:green;
    margin-top:5px;
    align-items:center;

}
.selectedContact{
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:rgba(33,252,0,1.00);
    margin-top:5px;
    align-items:center; 
}
</style>

Answer 1

使用 ajax 加载一次内容后，此检查始终为 true: if($('.findUs').length) 因此，您在到达该部分之前返回 false更改按钮类的代码。