[英]This JQuery snip doesn't work in Firefox
我不知道为什么,但下面的代码在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Í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',效果很好。 谢谢大家!
在这里纠正你的代码:
之前:
$( ".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中, 如下所示 :
// 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" );
});
});
为了使你的代码更干,链和使用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();
});
这是一个小提琴 。
这是AdBlock扩展程序捕获ad
术语。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.