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();
        });
       
    
    });

您可以尝试以下方法：

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

function hideOrDisplayElements(blnIsRetailProClicked){
  $(".product_retail, .product_food")[blnIsRetailProClicked ? 'show' : 'hide']();
  $(".food-pro, .retail-pro")[blnIsRetailProClicked ? 'removeClass' : 'addClass']('pro-active');
  $(".xclusive-pro").removeClass('pro-active');
  $(".product_xclusive .product_pro").hide();
}

---

最明显的是：

$(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管理所有内容

---

更简单、更简洁。

因此，请为您希望在一美元内完成相同操作的元素列出多个选择器……然后……？您的代码目前似乎可以正常工作，您正在寻求改进。一般来说，这些问题对本网站来说过于固执己见，但你可能会在网站上找到更好的运气。请记住阅读，因为它们比本网站严格一点。因此，请为要在一美元内完成相同操作的元素列出多个选择器…然后…？还可以将代码更改为使用行为相同的公共类，而不是单独针对每个元素。我们可以用代码做得更简单吗@谢谢你的建议，我尝试了你的代码，但是我什么都没发生。你能不能也提供html让我进一步研究？