javascript - 4 个切换按钮互相使用 javascript，但它们都不是好的听众——续集 : stupidity strikes back

Question

这是该线程的续集: 4 toggle buttons speak javascript to each other but none of them are good listeners

我们的英雄已经克服了最初出现在 fiddle 中的荒谬数量 http://jsfiddle.net/EjW7A/8/ (不再可用)当@nbrooks - 被善良的力量重新激发 - 用他的解决方案征服了所有愚蠢放置的数组、函数和大量冗余内容时:
http://jsfiddle.net/EjW7A/24/

在解决厄运实现这一史诗般的问题的最后一步，经过 8 小时的戳戳、刺激、喝红牛、砸混凝土墙头之后，我们重新加入了 Luhring:

新的 fiddle :

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

问题:

我如何才能动态插入内容 - 允许每个按钮切换它自己的内容，同时确保关闭其他按钮并隐藏它们的内容？例如，如果按钮 1 被打开(它是动画的，就好像它是一个“真正的”按下的按钮)，按钮 1 的内容显示在画廊中，点击内容可以显示灯箱。单击按钮 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​