使用jQuery切換功能掙扎

Question

我的工作帶Blurb的頁面上，例如here.

的想法是點擊照片將顯示在左邊的樂隊成員Blurb的，覆蓋整個樂隊介紹。

我與當前的代碼的問題是，使用切換顯示替代單個廣告詞意味着，當你在不同成員之間的點擊，有時切換狀態復位，它好像什麼也沒有發生。每次點擊一張照片時，該人物應顯示。只有當你點擊兩次相同的圖標時，或者是主生物顯示屏上的「返回到樂隊生物」按鈕（尚未在頁面上）。

我當前的代碼如下：

jQuery(document).ready(function($) { 

$('#gotoben').toggle(function() { 
    $('li.gotoben').fadeTo("slow", 1); 
    $("#dan").hide(); 
    $("#ben").show(); 
    $('li.gotoben').siblings().fadeTo("slow", 0.3); 
}, 
    function() { 
    $('li.gotoben').fadeTo("slow", 1); 
    $('li.gotoben').siblings().fadeTo("slow", 1); 
    $("#ben, #dan").hide(); 
}); 

$('#gotodan').toggle(function() { 
    $('li.gotodan').fadeTo("slow", 1);  
    $("#ben").hide(); 
    $("#dan").show(); 
    $('li.gotodan').siblings().fadeTo("slow", 0.3); 
}, 
    function() { 
    $('li.gotodan').fadeTo("slow", 1); 
    $('li.gotodan').siblings().fadeTo("slow", 1); 
    $("#dan, #ben").hide(); 
}); 

}); 

我已經使用了。點擊功能嘗試，但也不能使一切工作100％順利。

任何人都可以幫我做這個工作嗎？

編輯 - 工作代碼

這裏加入到帕特里克代碼的唯一事情是jQuery的stop功能的加入。

jQuery(document).ready(function($) { 

    $('.bigLeft div:gt(0)').hide(); 

    $('ol.band li').click(function() { 
     var $th = $(this); 

      // Hide the current profiles 
     $(".bigLeft").children().hide(); 

     if($th.hasClass('selected')) { 
      $th.stop(true, false).siblings().fadeTo("slow", 1); 
      $th.removeClass('selected'); 
      $('#theBand').show(); // <-- change the ID to the default 
     } else { 
      $th.addClass('selected'); 

       // Grab the ID of the one that was clicked 
      var id = $th.attr('id'); 

       // Fade in the current, and fade the siblings 
      $th.stop(true, false).fadeTo("slow", 1) 
        .siblings().removeClass('selected').stop(true, false).fadeTo("slow", 0.3); 

       // Show the clicked profile by concatenating the ID clicked with '_profile' 
      $("#" + id + "_profile").show(); 
     } 
    }); 

}); 

Answer 1

我往往會採取一些不同的方法。

給每個li下ol.bind的ID #ben，#dan等

然後給每個配置相似的ID #ben_profile，#dan_profile等

然後使用一致性，以你的優勢：

$('ol.band li').click(function() { 
    var $th = $(this); 

     // Hide the current profiles 
    $(".bigLeft").children().hide(); 

    if($th.hasClass('selected')) { 
     $th.siblings().fadeTo("slow", 1); 
     $th.removeClass('selected'); 
     $('#defaultProfile').show(); // <-- change the ID to the default 
    } else { 
     $th.addClass('selected'); 

      // Grab the ID of the one that was clicked 
     var id = $th.attr('id'); 

      // Fade in the current, and fade the siblings 
     $th.fadeTo("slow", 1) 
       .siblings().removeClass('selected').fadeTo("slow", 0.3); 

      // Show the clicked profile by concatenating the ID clicked with '_profile' 
     $("#" + id + "_profile").show(); 
    } 
}); 

您可以在這裏嘗試一下：http://jsfiddle.net/kDqsT/

Answer 2

這裏有一種方法可以通過點擊功能來實現。

var current_loc = ''; 
jQuery(document).ready(function($) { 

    $('#gotoben').click(function() { 
     if(current_loc != 'ben'){ 
      current_loc = 'ben'; 
      $('li.gotoben').fadeTo("slow", 1); 
      $("#dan").hide(); 
      $("#ben").show(); 
      $('li.gotoben').siblings().fadeTo("slow", 0.3); 
     }else{ 
      current_loc = ''; 
      $('li.gotoben').fadeTo("slow", 1); 
      $('li.gotoben').siblings().fadeTo("slow", 1); 
      $("#ben, #dan").hide(); 
     } 
    }); 

    $('#gotodan').click(function() { 
     if(current_loc != 'dan'){ 
      current_loc = 'dan'; 
      $('li.gotodan').fadeTo("slow", 1);  
      $("#ben").hide(); 
      $("#dan").show(); 
      $('li.gotodan').siblings().fadeTo("slow", 0.3); 
     }else{ 
      current_loc = ''; 
      $('li.gotodan').fadeTo("slow", 1); 
      $('li.gotodan').siblings().fadeTo("slow", 1); 
      $("#dan, #ben").hide(); 
     } 
    }); 
}); 

我敢肯定，有任何數量的更好的方式比這個。