Question

我有4辆汽车的清单（2辆红色，1辆绿色，1辆蓝色），我想显示与我点击的锚标签颜色相同的汽车。问题是，当我单击特定的颜色然后单击另一种颜色时，它不显示第二种颜色，我必须先单击“全部”，然后单击第二种颜色，以便最终可以看到它。

这是我在Codepen上的代码： https://codepen.io/m4t/pen/rrRgPj

还有我的代码段：

[{
            "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "5.2"
        },
        {
             "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "4"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "15.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "25.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "45.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "25.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "75.5"
        }


    ]

  _addMaskPhoneBr(phone: string){  
try {
  phone =  phone.replace(/[^\d]+/g,'');
  this.setState({ phone: phone });
  if(phone.length == 10){
    phone = (phone.length > 1 ? "(" : "")+phone.substring(0, 2) + (phone.length > 2 ? ")" : "")+(phone.length > 2 ? " " : "") + phone.substring(2,6) + (phone.length > 3 ? "-" : "") + phone.substring(6, 10);
  } else {
    phone = (phone.length > 1 ? "(" : "")+phone.substring(0, 2) + (phone.length > 2 ? ")" : "")+(phone.length > 2 ? " " : "") + phone.substring(3,2) + (phone.length > 3 ? " " : "") + phone.substring(3, 7) + (phone.length > 7 ? "-" : "") + phone.substring(7, 12);
  }
} catch(e){
  this.setState({ phone: phone });
}
this.setState({ phone: phone });

  /* jQuery function*/
                    $('#colors_buttons a').on('click', function(e) {

                                   var currColor = this.textContent.trim().toLocaleLowerCase();
                               
                                   if (currColor == 'all') {
                                       $("#colors div").fadeIn(500);
                                   } 

                                   else {
                                       /*Fade out all the other classes*/
                                       $('#colors :not(.' + currColor + '').fadeOut(200);
                                       
                                       /*Fade In the current class*/
                                       $("#colors ." + currColor + " img" ).fadeIn(500);
                                       $("#colors ." + currColor + " .button" ).fadeIn(500);
                                       $("#colors ." + currColor + " .button a" ).fadeIn(500);
                                   }
                   });

我想知道这可能是什么潜在问题，以及是否能很好地在JS中单独调用每个元素（图像和按钮..）。

感谢您的帮助。

Answer 1

问题是您的选择器'#colors :not(.' + currColor + ')'不够精确。它将选择#colors div中的所有内容。您可以缩小选择器的范围以仅选择子代（>），这将简化您的代码（和逻辑）。

/* jQuery function*/
$('#colors_buttons a').on('click', function(e) {

   var currColor = this.textContent.trim().toLocaleLowerCase();

   if (currColor == 'all') {
       $("#colors > div").fadeIn(500);
   } 

   else {
       /*Fade out all the other classes*/
       $('#colors > :not(.' + currColor + ')').fadeOut(200);

       /*Fade In the current class*/
       $("#colors ." + currColor ).fadeIn(500);
   }
});

/* GENERAL STYLE */
#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;
}


/* AREA  OF DISPLAY */

.red , .blue , .green{
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;

    position: relative;
    
    border: 1px solid #333;
    
    overflow: hidden;
    width: 240px;
    height: 300px;

    /*Center the button*/
    display: flex;
    align-items: center;
    justify-content: center;
}

        /*  IMAGES*/

        .red img , .blue img , .green img {
            max-width: 100%;
            height: 100%;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        
        }

       
/*BUTTON*/

.button  {
  
    padding: 12px 48px;
    border: solid 2px white;
    top: 50%;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease;
}

/*BUTTON A*/

.button a{
      text-decoration: none;
      color: white;
}

 /* EFFECT ON HOVERING */

        .red:hover:after ,  .blue:hover:after ,  .green:hover:after{
            background:rgba(255, 0, 0, 0.5);
            content:"\A";
            width:100%;
            height:100%;
            
            position:absolute;
            top:0;
            left:0;
        }

        /*IMAGE ( ZOOM IN ) */

        .red:hover img , .blue:hover img ,  .green:hover img {
            -moz-transform: scale(1.2);
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }
        /*BUTTON ( DISPLAY )*/

        .red:hover .button , .blue:hover .button  , .green:hover .button{
            opacity: 1;
        }

<html>
        <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
               
        </head>
<body>

   <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">
           <!--Red-->
           <div class="red ">
                <div class="button" ><a href="#"> BUTTON </a></div>
            <img src="https://img.huffingtonpost.com/asset/598cc71515000084208b6139.jpg" >
            
           </div>
           
           <div class="red "> 
                <div class="button"><a href="#"> BUTTON </a></div>
                <img src="https://img-new.cgtrader.com/items/874819/95ae61fafb/large/mustang-red-car-3d-model-max-obj-fbx-c4d-mtl.jpg">
           </div>
           
           <!--Blue-->
           <div class="blue">
                <div class="button"><a href="#"> BUTTON </a></div>
                <img src="https://www.bluecarrental.gr/bluecarrental/cache/thumbs/Cars%20big/ford_fiesta_diesel_500x300_f500x300.png">
           </div>
           
           <!--Green-->
           <div class="green">
                <div class="button"><a href="#"> BUTTON </a></div>
                <img src="https://cdn.importantmedia.org/planetsave/uploads/2011/05/26100621/green-car.jpg">
           </div>
       </div>
   </div>
  </body>
</html>

jQuery过滤项目的显示问题

1 个答案: