个人中心
gpt4 book ai didi

javascript - jQuery 过滤项目显示问题

转载 作者：行者123 更新时间：2023-12-03 01:19:25 25 4
gpt4 key购买 nike

我有 4 辆汽车的列表(2 辆红色、1 辆绿色、1 辆蓝色)，我想显示与我单击的 anchor 标记颜色相同的汽车。问题是，当我单击特定颜色然后单击另一种颜色时，它不会显示第二种颜色，我必须先单击“全部”，然后单击第二种颜色，这样我才能最终看到它。

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

我的代码片段:

  /* 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);
                                   }
                   });
/* 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>

我想知道这可能存在哪里的潜在问题，以及我是否在 JS 中很好地调用了每个元素本身(图像和按钮..)。

感谢您的帮助。

最佳答案

问题是您的选择器 '#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>

关于javascript - jQuery 过滤项目显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51828380/

25 4 0
文章推荐： Powershell参数化字符串没有看到第二个参数占位符
文章推荐： azure - 有没有办法列出应用程序安全组中的所有虚拟机
文章推荐： 通过 Powershell 的 Azure 克隆应用程序 - InternalServerError
文章推荐： audio - 任何非基于 Chromium 的网络浏览器都无法加载某些 H264-mp4 视频
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com