4切换按钮的JavaScript说话给对方，但他们都不是好listeners-续集：愚蠢反击 [英] 4 toggle buttons speak javascript to each other but none of them are good listeners- the sequel: stupidity strikes back

问题描述

这是续集的主题：
<一href=\"http://stackoverflow.com/questions/11814832/4-toggle-buttons-speak-javascript-to-each-other-but-none-of-them-are-good-listen\">4切换按钮说话JavaScript来对方，但他们都不是好听众

我们的英雄已经克服废话荒谬量原本在小提琴 HTTP psented $ P $：//的jsfiddle。净/ EjW7A / 8 / （不再提供）时的睦邻征服了所有的愚蠢放置阵列，功能和冗余的内容与他的解决方案，庞大数量的力量-reinvigorated @nbrooks：

http://jsfiddle.net/EjW7A/24/

Our heros have overcome the ridiculous amount of nonsense originally presented in the fiddle http://jsfiddle.net/EjW7A/8/ (no longer available) when @nbrooks -reinvigorated by the forces of good- conquered all of the stupidly placed arrays, functions and the mammoth amount of redundant content with his solution:
http://jsfiddle.net/EjW7A/24/

我们归队Luhring8小时戳后，怂恿，红牛喝，混凝土墙在解决doom-实施史诗问题的最后一步扑头：

We rejoin Luhring after 8 hours of poking, prodding, red bull drinking, concrete wall head-bashing at the final step of solving the epic problem of doom- implementation:

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

我怎样才能插入dynamically-允许每个按钮，同时确保其他按钮切换关闭和内容隐藏切换它自己的内容的内容？当然，如果按钮1上翻转（就好像它是一个'真正的'pressed按钮，它是动画），按钮1秒内容会显示在内容可点击显示灯箱画廊。当按钮2单击要切换按钮1并用自己的替换键1的内容。

How can I insert the content dynamically- allowing each button to toggle it's own content while making sure the other buttons are toggled off and their content hidden? ex, if button 1 is toggled on (it is animated as if it were a 'real' pressed button), button 1s content is displayed in a gallery where the contents can be clicked to display a lightbox. when button 2 is clicked should toggle button 1 off and replace button 1's contents with its own.

推荐答案

新工作演示

任何对DOM元素调用的jQuery必须在DOM ready函数内包裹正常工作（这就是为什么你的 $（'A'）。点击（）是失败。另外，一般来说，如果你看到自己创建多个阵列，你永远不会最终使用，而最终仍引用的每个元素直接，你做了很多无用功我打扫你的code了一下 - 取看：

Anything invoking jQuery on DOM elements must be wrapped within the DOM ready function to work correctly (this is why your $('a').click() was failing. Also, normally if you see yourself creating multiple arrays that you never end up using, and still end up referencing each element directly, you're making a lot of wasted effort. I cleaned your code up a bit - take a look:

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​

这篇关于4切换按钮的JavaScript说话给对方，但他们都不是好listeners-续集：愚蠢反击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！