此 JQuery 片段在 Firefox 中不起作用

Question

我不知道为什么，但下面的代码在 Firefox 中不起作用。它在 Chrome 中非常完美。

// Buttons marker
$( "#second button" ).click(function() {
    $( this ).toggleClass('selected');
    $( this ).toggleClass('unselected');
    $( this ).toggleClass('btn-warning');
    $( this ).toggleClass('btn-default');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category=usedmotos" ).hide();
    $( ".ad[data-category=spares" ).hide();
    $( ".ad[data-category=accessories" ).hide();
});

有什么建议吗？我认为 JQuery 是多平台的：/

编辑：代码应该使用选定的data-category 隐藏一些 div，并通过顶部的一些按钮提供显示它们的能力。 我在同一个网页中使用其他 JS 代码并且这些代码正在工作，我认为这很重要，因为它不会使所有 Javascript 崩溃。 Firebug 什么也没说 :(

编辑 2：添加我的 html。代码只是body的主要部分，其他的就不用了。

 <div id="main" role="main">

            <!-- Section #1 / Cover -->
            <section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">        
                <article>
                    <h2>Tienda</h2>
                </article>
            </section>

            <!-- Section #2 / Keycloud -->
            <section id="second" class="point heads">
                <article>
                    <div class="text">
                        <h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
                        <h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
                    </div>
                    <div class="btn-group-vertical">
                        <div><span>CATEGOR&Iacute;AS:</span></div>
                         <button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
                         <button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
                         <button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
                         <button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
                    </div>

                </article>
            </section>

            <!-- Section #3 / Bulletin -->
            <section id="third" class="point heads">
                <h4 class="line-divider">ANUNCIOS</h4>
                <article>

                    <div class="ad" data-category="newmotos">
                        <a href="images/ads/ad01/1.jpg" rel="lightbox-ad01"><img src="images/ads/ad01/1.jpg" /></a>
                        <a href="images/ads/ad01/2.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/3.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/4.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/5.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/6.jpg" rel="lightbox-ad01"></a>

                        <div>
                            <h6>Piaggio Liberty 49cc</h6>
                            <p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
                            <fieldset>
                                <span class="label label-success">250€</span>
                                <span class="label label-default">49cc</span>
                                <span class="label label-info">5.000km</span>
                                <span class="label label-warning">Blanca</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="usedmotos">
                        <img src="images/ads/aprilia.jpg" />
                        <div>
                            <h6>Aprilia RS 49cc</h6>
                            <p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro  </p>
                            <fieldset>
                                <span class="label label-info">550€</span>
                                <span class="label label-info">49cc</span>
                                <span class="label label-default">15.000km</span>
                                <span class="label label-default">Negra</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="spares">
                        <img src="images/ads/puente.jpg" />
                        <div>
                            <h6>Puente culata Kawasaki 450 </h6>
                            <p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
                            <fieldset>
                                <span class="label label-default">150€</span>
                                <span class="label label-default">Modelo 450</span>
                                <span class="label label-default">2006</span>
                            </fieldset>
                        </div>
                    </div>

                </article>
            </section>

编辑 3：网络没有加载代码所在的文件“ads-controller.js”。下面的代码是我插入 JS 文件的方式。

    </div> <!-- // End of #main -->      

    <!-- Our Javascript, starting with jQuery -->
    <script src='js/libs/jquery-1.6.1.min.js'></script>
    <script src="js/libs/slimbox/slimbox2.js"></script>
    <script src="js/ads-controller.js"></script>
    <script src="js/scroller.js"></script>
    <script src="js/parallax.js"></script>

已解决：这是扩展程序“广告拦截器”。因为文件名中的“广告”。我刚刚重命名为“controller.js”并且运行良好。谢谢大家！

Answer 1

为了让你的代码更干，链接和使用 CSS 选择器：

// Buttons marker
$( "#second button" ).click(function() {
    $( this )
         .toggleClass('selected')
         .toggleClass('unselected')
         .toggleClass('btn-warning')
         .toggleClass('btn-defualt');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos'], .ad[data-category='spares'], .ad[data-category='accessories']" ).hide();
});

Here's a fiddle.

Answer 2

在这里更正你的代码：

之前：

$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();

之后：

$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();

还可以将您的代码以following 的形式包含在DOM 中：

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos']" ).hide();
    $( ".ad[data-category='spares']" ).hide();
    $( ".ad[data-category='accessories']" ).hide();

    // Buttons marker
    $( "#second button" ).click(function() {
        $( this ).toggleClass('selected');
        $( this ).toggleClass('unselected');
        $( this ).toggleClass('btn-warning');
        $( this ).toggleClass('btn-default');
    });

    // Ads switcher
    $( "#second button" ).click(function() {
        var category = $( this ).attr( "name");
        $( ".ad[data-category="+category+"]" ).toggle( "slow" );
    });

});

Answer 3

是 AdBlock 扩展程序捕获了 ad 术语。