4个切换按钮互相说javascript，但没有一个是好听众 - 续集：愚蠢的反击

Question

这是这个帖子的续集： 4 toggle buttons speak javascript to each other but none of them are good listeners

我们的英雄已经克服了最初在小提琴http://jsfiddle.net/EjW7A/8/（不再可用）中出现的荒谬的废话，当时@nbrooks - 被所有愚蠢放置的阵列，功能和猛犸象的力量所激励。他的解决方案的冗余内容量：
http://jsfiddle.net/EjW7A/24/

在解决史诗般的厄运问题的最后一步，经过8个小时的戳刺，刺激，喝红牛，混凝土墙抨击后，我们重新加入了卢林：

新小提琴：

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

问题：

如何动态插入内容 - 允许每个按钮切换自己的内容，同时确保其他按钮被切换并隐藏其内容？例如，如果按钮1被打开（它被设置为“真实”按下按钮的动画），则按钮1s内容显示在图库中，其中可以点击内容以显示灯箱。单击按钮2时，应关闭按钮1并用自己的内容替换按钮1的内容。

Answer 1

New Working Demo

在DOM元素上调用jQuery的任何东西都必须包含在DOM就绪函数中才能正常工作（这就是你的$('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​