javascript - jQuery过滤div的显示问题

Question

我使用 jQuery 来过滤 div 的显示，当我单击颜色名称时，我希望它仅显示与该颜色对应的 div，对于“红色”示例，它工作正常，但不是蓝色和绿色的，首先我想知道发生的问题，然后是解决它的最佳方法。

非常感谢。

  /* jQuery function*/
                  
                $(document).ready(function(){
                    $("#button_red").click(function(){
                        $("#green").fadeOut(200);
                        $("#blue").fadeOut(200);

                        $("#red").fadeIn(500);
                       
                    });

                   $("#button_blue").click(function(){ 
                        $("#red").fadeOut(200);
                        $("#green").fadeOut(200);
                
                        $("#blue").fadeIn(500);
                    });

                   $("#button_green").click(function(){
                        $("#red").fadeOut(200);
                        $("#blue").fadeOut(200);

                        $("#green").fadeIn(500);
                    });

                     
                });

    
#colors_container{
    background-color: white;
    width: 100%;
    height: 900px;

    
}

#colors_container #colors_buttons{
    width: 450px;
    height: 50px;
    margin: 20px auto 10px auto;
    background-color: purple;


}

#colors_container #colors_buttons a {
    text-decoration: none;
    float: left;
    margin-right: 30px;
    border : solid 2px red;
    padding: 10px 10px 10px 10px ; 
    color: white;
}

#colors_container #colors{
    width: 1060px;
    height: 800px;
    margin: 10px auto 10px auto;
    background-color: yellow;
    padding: 10px 10px 10px 10px;
}

#red , #blue , #green {
    width: 250px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

#red{
    background-color: red;
}

#blue{
    background-color: blue;
}

#green{
    background-color: green;
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               
  

            <div id="colors_container">
                    <div id="colors_buttons">
                        
                        <a href="">ALL</a>
                        <a id="button_red" href="#">Red</a>
                        <a id="button_blue" href="#">Blue</a> 
                        <a id="button_green" href="#">Green</a> 
                     
                    </div>
                    
                    <div id="colors">

                       <div id="red"></div>
                       <div id="blue"></div>
                       <div id="red"></div>
                       <div id="green"></div>
                       
                    </div>
            </div>
 

Answer 1

由于您有重复的 ID(请参阅id="red")，我建议将您的 ID 转换为类。此外，我建议减少事件处理程序，因为 anchor 文本和类名相似:

$('#colors_buttons a').on('click', function(e) {
   // get the button text (ALL, Red, Blue, Green), remove spaces and transform in lower case
    var currColor = this.textContent.trim().toLocaleLowerCase();
    // now in currColor  variable we have a string like red or blue or green
    // but this string corresponds to the class name of the divs....
    if (currColor == 'all') {
        $("#colors div").fadeIn(500);
    } else {
        // fade out all #colors divs not having such a class
        $('#colors :not(.' + currColor + '').fadeOut(200);
        // fade in the only one...
        $("#colors ." + currColor).fadeIn(500);
    }
})

#colors_container{
    background-color: white;
    width: 100%;
    height: 900px;


}

#colors_container #colors_buttons{
    width: 450px;
    height: 50px;
    margin: 20px auto 10px auto;
    background-color: purple;


}

#colors_container #colors_buttons a {
    text-decoration: none;
    float: left;
    margin-right: 30px;
    border : solid 2px red;
    padding: 10px 10px 10px 10px ;
    color: white;
}

#colors_container #colors{
    width: 1060px;
    height: 800px;
    margin: 10px auto 10px auto;
    background-color: yellow;
    padding: 10px 10px 10px 10px;
}

.red , .blue , .green {
    width: 250px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.green{
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="colors_container">
    <div id="colors_buttons">
        <a href="">ALL</a>
        <a id="button_red" href="#">Red</a>
        <a id="button_blue" href="#">Blue</a>
        <a id="button_green" href="#">Green</a>
    </div>

    <div id="colors">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="red"></div>
        <div class="green"></div>
    </div>
</div>