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 就绪函数中才能正常工作（这就是你$('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 回答