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。萤火虫不要说我什么:(

编辑2：添加我的HTML。代码只是正文的主体，我想其他代码是没有必要的。

 <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

在此处更正您的代码：

在：

$( ".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();

同时将您的代码封装到DOM中following：

// 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 2

使您的代码更干，链并使用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 3

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

这个JQuery剪辑在Firefox中不起作用

3 个答案: