1

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

想法是单击一张照片，该照片将在左侧显示乐队成员简介，覆盖整个乐队的描述。

我对当前代码的问题是，使用切换来显示替代的单个简介意味着当您在不同成员之间单击时，有时切换状态会重置，并且似乎什么都没有发生。每次单击照片时，都应显示该人的简历。只有当您单击同一个按钮两次或“返回乐队简介”按钮（尚未在页面上）时，主简介才会显示。

我当前的代码如下：

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 代码的唯一内容是包含 jQuerystop函数。

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

});
4

2 回答 2

3

我倾向于采取一些不同的方法。

在 ID 、等li下给出每个。ol.bind#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/

于 2010-06-29T18:46:35.870 回答
1

这是一种使用点击功能的方法。

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

我相信还有很多比这更好的方法。

于 2010-06-29T18:40:57.850 回答