Javascript 如何在jQuery中编写隐藏/显示-添加/删除类-更优化的代码？

我有一段代码，可以在单击右键时将类删除或添加到div中。这段代码运行得很好，但我知道有一种更优雅的方法可以用更少的代码来实现这一点

我的代码：

jQuery(document).ready(function($) {    
  // #pri01 is visible, has class visible by default
  $("#pri01").addClass('visible');
  $("#pri01").removeClass('hide');

  // LINKTEXT2
  // on click on #linktext2 - #pri01, #pri03, #pri04, #pri05, #pri06 gets class hide and lose class visible
  $("#linktext2").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext2 #pri02 gets class visible and lose class hide
    $('#pri02').removeClass('hide');
    $('#pri02').addClass('visible');         
  });    

  //#LINKTEXT1      
  // on click on #linktext1 - #pri02, #PRI03, #PRI04, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext1").click(function(){
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');   
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext1 #pri01 gets class visible and lose class hide
    $('#pri01').removeClass('hide');
    $('#pri01').addClass('visible');         
  });    

  //#LINKTEXT3      
  // on click on #linktext3 - #pri02, #PRI01, #PRI04, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext3").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext3 #pri03 gets class visible and lose class hide
    $('#pri03').removeClass('hide');
    $('#pri03').addClass('visible');         
  });    

  //#LINKTEXT4      
  // on click on #linktext4 - #pri02, #PRI01, #PRI03, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext4").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext4 #pri04 gets class visible and lose class hide
    $('#pri04').removeClass('hide');
    $('#pri04').addClass('visible');         
  });    

  //#LINKTEXT5      
  // on click on #linktext5 - #pri02, #PRI01, #PRI03, #PRI04, #PRI06 gets class hide and lose class visible
  $("#linktext5").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext5 #pri05 gets class visible and lose class hide
    $('#pri05').removeClass('hide');
    $('#pri05').addClass('visible');         
  });    

  //#LINKTEXT6      
  // on click on #linktext6 - #pri02, #PRI01, #PRI03, #PRI04, #PRI05 gets class hide and lose class visible
  $("#linktext6").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    // on click on #linktext6 #pri06 gets class visible and lose class hide
    $('#pri06').removeClass('hide');
    $('#pri06').addClass('visible');         
  }); 
  //konec
});

所以我有6个按钮：

#linktext1, #linktext2, #linktext3, #linktext4, #linktext5, #linktext6 

及分区组

#pri01, pri02, #pri03, #pri04, #pri05, #pri06

因此，当我点击

#linktext1

时，只有

#pri1

应该是可见的（让类可见），而所有其他的都是隐藏的（让类隐藏）

---

那么，如何将此代码简化为几行并使其更为优化？

无需对当前HTML结构进行假设，只需基于代码，您就可以使用单个事件处理程序完成此操作：

$("#linktext1, #linktext2, #linktext3, #linktext4, #linktext5, #linktext6").click(function() {
    var pre = "#pre" + this.id.match(/\d+$/);
    $("#pre1, #pre2, #pre3, #pre4, #pre5, #pre6")
        .not(pre)
        .removeClass("visible")
        .addClass("hide");
    $(pre).removeClass("hide").addClass("visible");
});

它为单击的

#linktext

获取匹配的

#pre

的ID，然后查找所有

#pre

，排除匹配的

#pre

，从其他五个类中删除可见类，并向它们添加

隐藏
类。然后，它获取匹配的
#pre
并删除
隐藏
并添加
可见

其他一些注意事项：


与其同时拥有
可见的
和
隐藏的
类，我建议只拥有一个或另一个类，而让“其他”状态只是类的缺席
我会考虑使用类而不是所有那些ID
如果所有的
#linktext
都在一个容器中，而所有的
#pre
都在一个容器中，则可以使用它们在容器中的位置

比如：


$（.link”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var index=$（this.index（）；
$（“.pre”）
.removeClass（“可见”）
.eq（指数）
.addClass（“可见”）；
});
a.link{
左边距：2倍；
右边距：2px；
}
/*.pre的默认状态为不显示*/
.预{
显示：无；
}
.预先可见{
显示：块；
}


前1
前2
前3
前四
5岁以前
6岁以前
您可以通过识别类名的数字来检查类层次结构中的子级。
请发布您的HTML