Javascript 与jQuery切换函数斗争

例如，我正在制作一个乐队简介页面

我们的想法是点击一张照片，它会在左侧显示乐队成员的简介，覆盖整个乐队的描述

我对当前代码的问题是，使用toggle来显示可选的单个模糊表示，当您在不同的成员之间单击时，有时切换状态会重置，看起来什么都没有发生。每次单击照片时，都应显示该照片。只有当您点击同一个按钮两次，或“返回乐队bio”按钮（尚未在页面上）时，主bio才会显示

我目前的代码如下：

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();
}); 

});

我尝试过使用.click功能，但也无法使所有工作100%顺利进行

有人能帮我做这件事吗

编辑-工作代码

这里添加到patricks代码中的唯一内容是包含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();
        }
    }); 

});

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();
        }
    });
});

jQuery（文档）.ready（函数（$）{
$（'.bigLeft div:gt（0）'）.hide（）；
$（'ol.band li'）。单击（函数（）{
var$th=$（本）；
//隐藏当前配置文件
$（“.bigLeft”）.children（）.hide（）；
如果（$th.hasClass（'selected'））{
$th.stop（真、假）.sides（）.fadeTo（“慢”，1）；
$th.removeClass（'selected'）；
$（“#theBand”）.show（）；//这里有一种使用click函数的方法

    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();
        }
    }); 

});

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();
        }
    });
});

我相信还有很多比这更好的方法。
这里有一种使用单击功能的方法

    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();
        }
    }); 

});

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();
        }
    });
});

我相信还有很多比这更好的方法。
我倾向于采取一些不同的方法

为
ol.bind
下的每个
li
提供ID
\ben
、
\dan
等

然后为每个配置文件提供一个类似的ID
#ben#u profile
，
#dan#u 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();
    }
}); 

$（'ol.band li'）。单击（函数（）{
var$th=$（本）；
//隐藏当前配置文件
$（“.bigLeft”）.children（）.hide（）；
如果（$th.hasClass（'selected'））{
$th.FILLIES（）.fadeTo（“慢”，1）；
$th.removeClass（'selected'）；
$（'#defaultProfile'）.show（）；/我倾向于采用一种稍微不同的方法

为
ol.bind
下的每个
li
提供ID
\ben
、
\dan
等

然后为每个配置文件提供一个类似的ID
#ben#u profile
，
#dan#u 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();
    }
}); 

$（'ol.band li'）。单击（函数（）{
var$th=$（本）；
//隐藏当前配置文件
$（“.bigLeft”）.children（）.hide（）；
如果（$th.hasClass（'selected'））{
$th.FILLIES（）.fadeTo（“慢”，1）；
$th.removeClass（'selected'）；
$（'#defaultProfile'）.show（）使用“切换”可以回到起点。有什么想法吗？@DanC-没关系。我后来添加了这些。我刚刚更新。未经测试，但我认为它会起作用。请告诉我。：o）@patrick Scrape最后一条评论-效果很好！非常感谢你的帮助！现在我可以回去看世界杯了，不再为这个次要的设计细节而烦恼。再次感谢！这非常有效，除非你再次单击所选的个人资料，它不会返回到“乐队”简历。这是使用“切换”的主要原因，因此你可以可以说，回到开头。有什么想法吗？@DanC-没关系。我后来添加了这些。我刚刚更新。未经测试，但我认为它会起作用。请告诉我。：o）@patrick scrap last comment-效果很好！非常感谢你的帮助！现在我可以回去看世界杯了，不再为这个小设计细节而烦恼了。再次感谢！