2

これはこのスレッドの続編です: 4 つのトグル ボタンが JavaScript を相互に通信しますが、どれも良い聞き手ではありません

私たちのヒーローは、@nbrooks - 善の力によって再活性化された - が愚かに配置されたすべての配列を征服したときに、フィドルhttp://jsfiddle.net/EjW7A/8/ (利用できなくなりました)で最初に提示されたばかげた量のナンセンスを克服しました。関数と彼のソリューションによる膨大な量の冗長コンテンツ:
http://jsfiddle.net/EjW7A/24/

運命の実装の壮大な問題を解決する最終ステップで、8時間の突っついたり、突き刺したり、赤い雄牛を飲んだり、コンクリートの壁を頭で叩いたりした後、Luhringに再び参加します。

新しいフィドル:

http://jsfiddle.net/Luhring/EjW7A/38/

問題：

コンテンツを動的に挿入するにはどうすればよいですか? 他のボタンがオフに切り替えられ、それらのコンテンツが非表示になっていることを確認しながら、各ボタンが独自のコンテンツを切り替えられるようにしますか? たとえば、ボタン 1 がオンになっている場合 (実際に押されたボタンのようにアニメーション化されます)、ボタン 1 のコンテンツがギャラリーに表示され、コンテンツをクリックしてライトボックスを表示できます。ボタン 2 がクリックされたときに、ボタン 1 をオフに切り替え、ボタン 1 のコンテンツを独自のものに置き換えます。

4

1 に答える 1

1

新しい作業デモ

DOM要素でjQueryを呼び出すものはすべて、正しく機能するためにDOM Ready関数内にラップする必要があります（これ$('a').click()が失敗した理由です。また、通常、使用することのない複数の配列を作成し、それでも各要素を直接参照することになる場合、あなたは多くの無駄な努力をしています.私はあなたのコードを少しきれいにしました-見てください:

jQuery(document).ready(function($) {
    //variable declaration section.
    var contentArray = ['albumArt', 'logoDesign', 'UX', 'other'],
        content = {}, newClassName, $selectedArray, i;

    for ( i = 0; i < contentArray.length; i++) {
        var className = contentArray[i];
        content[className] = $('.' + className);
    }

    //prevent links that are clicked from going anywhere
    $("a").click(function(e) {
        e.preventDefault();
    });

    $('.workTypes').click(function() {
        if ($(this).is('#centeringDiv a')) return;

        $(this).toggleClass('workTypesSelected');
        $('.workTypesSelected').not(this).removeClass('workTypesSelected');

        $selectedArray = content[$('.workTypesSelected').attr('id')];
        $('#galleryDiv').empty();

        if ( $selectedArray ) {
            // note creates #largeGallery elements dynamically
            for ( i = 0; i < $selectedArray.length; i++ ) {
                var $selected = $selectedArray.eq(i);

                $('<a>').attr({
                    href: $selected.attr('href'),
                    title: $selected.attr('title'),
                    class: "lb_gal"
                }).append(
                    $('<img>').attr({
                        id: "largeGallery"+i,
                        src: $selected.attr('href'),
                        class: "gallery cf"
                    }).rlightbox()
                )
                .appendTo('#galleryDiv')
                .rlightbox();
            }
        }

    }); // end click handler
}); //end the document ready jquery function​
于 2012-08-07T08:51:05.190 に答える