Question

我正在制作乐队模糊页面，例如here.

想法是点击一张照片，左边会显示乐队成员模糊，覆盖整个乐队的描述。

我对当前代码的问题是使用切换来显示替代的单个模糊意味着当您在不同成员之间单击时，有时切换状态会重置并且似乎什么也没发生。每次单击照片时，都应显示那些人物。只有当您点击相同的两次，或者“返回到生物区域”按钮（页面上还没有）时，主要的生物显示才会显示。

我目前的代码如下：

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功能，但也无法让所有内容顺利运行。

任何人都可以帮我做这项工作吗？

编辑 - 工作代码

这里唯一添加到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();
        }
    }); 

});

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

我确信有比这更好的方法。

苦苦挣扎jQuery Toggle功能

2 个答案: