jQuery - 觸發顯示（），隱藏（）按鈕點擊

Question

與我的fiddle，我使它突出顯示一個主菜單按鈕加載和show（）和hide（）相應的按鈕設置在底部。

我認爲是錯誤的，但無法弄清自己是要做的$ this變量的參考範圍在我的switch語句中。在我的情況下，$這指向單擊的按鈕值，我認爲是類的名稱，但在我的switch語句中，我不確定是否可以引用$ this中的id名稱。我想我的問題是$ this在我的場景中有什麼價值？

很高興看到一個可行的例子，可能使用較少的代碼，因爲我可以看到許多重複的地方，它可以簡化。

$('.menu').click(function() { 
    if ($(this) != $('.highlight')) { 
     $(this).addClass('highlight') 
      .siblings('.menu') 
      .removeClass('highlight'); 
    } 
    switch ($this) { 
     case '#dateMenu': 
      $('.date-chart').show(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').hide(); 
      break; 
     case '#jcMenu': 
      $('.date-chart').hide(); 
      $('.jc-chart').show(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').hide(); 
      break; 
     case '#jpMenu': 
      $('.date-chart').hide(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').show(); 
      $('.ws-chart').hide(); 
      break; 
     case '#wsMenu': 
      $('.date-chart').hide(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').show(); 
      break; 
    } 
}); 

Answer 1

$this應該$(this) ......這是refrence當前元素......因爲你正在檢查的ID。使用prop()。

switch ($(this).prop('id')) { or switch (this.id) { ... 

並取出#形式的情況下

試試這個

$('.menu').click(function() { 
if (!$(this).hasClass('.highlight'))) { 
    $(this).addClass('highlight') 
     .siblings('.menu') 
     .removeClass('highlight'); 
} 

switch ($(this).prop('id')) { 
    case 'dateMenu': 
     $('.date-chart').show(); 
     $('.jc-chart').hide(); 
     $('.jp-chart').hide(); 
     $('.ws-chart').hide(); 
     break; 
    case 'jcMenu': 
     $('.date-chart').hide(); 
     $('.jc-chart').show(); 
     $('.jp-chart').hide(); 
     $('.ws-chart').hide(); 
     break; 
    case 'jpMenu': 
     $('.date-chart').hide(); 
     $('.jc-chart').hide(); 
     $('.jp-chart').show(); 
     $('.ws-chart').hide(); 
     break; 
    case 'wsMenu': 
     $('.date-chart').hide(); 
     $('.jc-chart').hide(); 
     $('.jp-chart').hide(); 
     $('.ws-chart').show(); 
     break; 
} 
}); 

fiddle here

更新

爲減少代碼...您可以使用兄弟姐妹（ ）。

switch ($(this).prop('id')) { 
    case 'dateMenu': 
     $('.date-chart').show().siblings().hide(); 

     break; 
    case 'jcMenu': 

     $('.jc-chart').show().siblings().hide(); 

     break; 
    case 'jpMenu': 

     $('.jp-chart').show().siblings().hide(); 

     break; 
    case 'wsMenu': 

     $('.ws-chart').show().siblings().hide(); 
     break; 
} 

updated fiddle

Answer 2

($this)是錯誤的不分配，而是使用this.id

您可以使用確實像

var id = this.id; 
switch (id) 

並刪除你的情況下#，並像下面

switch (this.id) { 
     case 'dateMenu': //removed # 
      $('.date-chart').show(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').hide(); 
      break; 
     case 'jcMenu': //removed # 
      $('.date-chart').hide(); 
      $('.jc-chart').show(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').hide(); 
      break; 
     case 'jpMenu': //removed # 
      $('.date-chart').hide(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').show(); 
      $('.ws-chart').hide(); 
      break; 
     case 'wsMenu': //removed # 
      $('.date-chart').hide(); 
      $('.jc-chart').hide(); 
      $('.jp-chart').hide(); 
      $('.ws-chart').show(); 
      break; 
    } 

工作fiddle