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

Question

我有代码可以通过单击右键将类删除或添加到 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 

和div部分

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

所以当我点击 #linktext1 时，只有 #pri1 应该是可见的(类可见)，所有其他的都是隐藏的(类隐藏)。

那么如何把这段代码精简几行，让这段代码更加优化呢？

Answer 1

无需假设您当前的 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，从其他五个中删除可见类并向它们添加 hide 类。然后它获取匹配的 #pre 并删除 hide 并添加 visible。

一些其他注意事项:

• 我建议不要同时使用 visible 和 hide 类，而只使用其中之一，并且让“其他”状态只是类的缺失。
• 我会考虑使用类而不是所有那些 ID。
• 如果所有的 #linktext 都在一个容器中，并且所有的 #pre 都在一个容器中，您可以使用它们在容器中的位置。

类似于:

$(".link").on("click", function(e) {
  e.preventDefault();
  var index = $(this).index();
  $(".pre")
    .removeClass("visible")
    .eq(index)
    .addClass("visible");
});

a.link {
  margin-left: 2px;
  margin-right: 2px;
}
/* Default state for a .pre is not to show */
.pre {
  display: none;
}
.pre.visible {
  display: block;
}

<p>
  <a href="#pre1" class="link">link 1</a>
  <a href="#pre2" class="link">link 2</a>
  <a href="#pre3" class="link">link 3</a>
  <a href="#pre4" class="link">link 4</a>
  <a href="#pre5" class="link">link 5</a>
  <a href="#pre6" class="link">link 6</a>
</p>
<div>
  <div class="pre visible">pre 1</div>
  <div class="pre">pre 2</div>
  <div class="pre">pre 3</div>
  <div class="pre">pre 4</div>
  <div class="pre">pre 5</div>
  <div class="pre">pre 6</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>