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转换为类。此外，我建议使用简化的事件处理程序，因为锚文本和您的类名称相似：

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

jQuery过滤divs的显示问题

1 个答案: