如何為hide / show編寫此代碼 - 添加/刪除類 - 在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> 

Answer 2

您可以檢查類層次結構中的子項，也可以通過標識類名稱的數字來檢查子項。