时间戳

首页 > 解决方案 > 减少 jQuery 代码以在单击事件时隐藏显示的建议

javascript - 减少 jQuery 代码以在单击事件时隐藏显示的建议

问题描述

在此，我尝试隐藏和显示 div。

它运行良好，但我想减少此代码，因为它在点击功能上看起来相同

 $(document).ready(function() {        
        $(".product_pro").show();
        $(".product_retail").hide();
        $(".product_food").hide();
        $(".product_xclusive").hide();
        $(".retail-pro").addClass('pro-active');
    
        $(".retail-pro").click(function() {
            $(".product_retail").show();
            $(".product_pro").hide();
            $(".food-pro").removeClass('pro-active');
            $(".xclusive-pro").removeClass('pro-active');
            $(".retail-pro").addClass('pro-active');
            $(".product_food").hide();
            $(".product_xclusive").hide();
        });
        $(".food-pro").click(function() {
            $(".product_retail").hide();
            $(".product_food").show();
            $(".product_pro").hide();
            $(".food-pro").addClass('pro-active');
            $(".retail-pro").removeClass('pro-active');
            $(".xclusive-pro").removeClass('pro-active');
            $(".product_xclusive").hide();
        });
       
    
    });

标签： javascriptjquery

解决方案

最明显的是：

$(document).ready(function() {        
  $(".product_pro").show();
  $(".product_retail, .product_food, .product_xclusive").hide();
  $(".retail-pro").addClass('pro-active');

  $(".retail-pro").click(function() {
    $(".product_retail").show();
    $(".food-pro, .xclusive-pro").removeClass('pro-active')
    $(".retail-pro").addClass('pro-active');
    $(".product_food, .product_xclusive, .product_pro").hide();
  });
  
  $(".food-pro").click(function() {
    $(".product_retail, .product_pro, .product_xclusive").hide();
    $(".product_food").show();
    $(".food-pro").addClass('pro-active');
    $(".retail-pro, .xclusive-pro").removeClass('pro-active');
  });
});

但我建议在您希望在不同状态下隐藏或可见的元素中放置一个通用类，按状态（不是每个元素）更改容器的类，并使用 css 管理所有内容。

更简单，更清洁。

推荐阅读