1

私はバンドの宣伝ページに取り組んでいます。例はこちらです。

写真をクリックすると、左側にバンド メンバーの宣伝文句が表示され、バンド全体の説明が重ねて表示されます。

現在のコードに関する私の問題は、トグルを使用して代替の個々の宣伝文を表示すると、異なるメンバー間をクリックすると、トグル状態がリセットされ、何も起こっていないように見えることがあります。写真をクリックするたびに、その人物の略歴が表示されます。同じものを 2 回クリックするか、「バンド バイオに戻る」ボタン (まだページにはありません) をクリックした場合にのみ、メインのバイオが表示されます。

私の現在のコードは以下の通りです：

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% スムーズに機能しません。

誰でもこの作業を手伝ってもらえますか?

編集 - 作業コード

ここで patrick のコードに追加されたのは、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 に答える