Jquery .show()和.hide()甚至是.css({“display”:“none”});不工作在Firefox? [英] Jquery .show() and .hide() or even .css({"display":"none"}); not working in firefox?

查看:98
本文介绍了Jquery .show()和.hide()甚至是.css({“display”:“none”});不工作在Firefox?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

出于某种奇怪的原因,在脚本中显示和隐藏对象的部分似乎不起作用。我不确定是否它的事实firefox不喜欢,或者是否它的基于函数的代码(保存重复的代码行)?

是一个工作的例子这里和JavaScript是这里



这里是jquery **

  $(document).ready(function() (); 
$(
$ b $ $ $ $''bedtype_price')。click(function(); $ b $ checkBedType();
checkBedType();
checkHeadboardOption();
$ b $
{
checkBedType();
});
$ b $('。headboard_option')。click(function()
{
checkHeadboardOption();
});

$('#bed-floater')。scrollFollow({offset:10});
$('。texture')。 (。);
$('。texture')。children(input ).attr(切cked,);

$(this).addClass(checked);
$(this).children(input)。attr(checked,checked);

});
$ b $('。pricechanger_auto')。change(function()
{
totUpPrices();
});

$('。bed-width-single')。change(function()
{
if($(this).val()==26 \|| $(this).val()==3)
{
$('。pocketmatic-mattress')。attr(disabled,)



$('。pocketmatic-mattress')。attr(disabled,disabled);
if($('。 (select)。val()==Pocketmatic)
{
$('。pocketmatic-mattress')。parent(select)。children( attr(selected,selected);
}
}
});

$(' ($(this).val()==46)$(this)。 val()==6)
{
$('。pocketmatic-mattress')。attr(disabled,);
}
else

$('。pocketmatic-mattress')。attr(disabled,disabled);
if($('。pocketmatic-mattress')。parent(select ).val()==Pocketmatic)
{
$( pocketmatic-床垫。)的父( 选择)的儿童(选项[值=] )ATTR( 选择, 选择)。。。;
}
}
});

函数totUpPrices()
{

var totalprice = 0;

//检查床价类型
var objs = $('。bedtype_price'); ($(value).attr(checked))
{
totalprice = totalprice + parseInt($(value).attr(cost));
}

});

//检查传送选项
var objs = $('。deliveryoptions_price'); ($(value).attr(checked))
{
totalprice = totalprice + parseInt($(value).attr(cost));
}

});

//支票下拉价格
var objs = $('。select_price');
$ .each(objs,function(index,value){

newvalue = $(value).attr(value);
$ .each($(value )($(this).attr(value)== newvalue)
{
totalprice = totalprice + parseInt($(this).attr(cost));
}

});

});
$('#totalincvat')。text(totalprice);


函数checkBedType()
{
var objs = $('。bedtype_price');
var checkedType ='';
$ .each(objs,function(index,value){
$ b $ if($(value).attr(checked))
{
checkedType = $(value).val();
}

});
if(checkedType ==Single Bed)
{
$('。show_with_single')。show();
$('。show_with_twin')。hide();
$('。changeOnTwin')。text(你想要一个床头板吗?);

else
{
$('。show_with_twin')。show();
$('。show_with_single')。hide();
$('。changeOnTwin')。text(你喜欢床头板吗?);



函数checkHeadboardOption()
{
var objs = $('。headboard_option');
var checkedType ='';
$ .each(objs,function(index,value){
$ b $ if($(value).attr(checked))
{
checkedType = $(value).val();
}

});
if(checkedType ==Yes)
{
$('。headboard-options')。show();
}
else
{
$('。headboard-options')。hide();
}
}

});

所有帮助表示赞赏

解决方案

您的HTML无法验证。看到这里,

http://validator.w3.org/check?uri=http%3A %2F%2Fbed-adjustable.co.uk%2Fbuild-a-bed%2F& charset =%28detect + automatic%29& doctype = Inline& group = 0 $ b $



对不起,您的第一行是好的,我不知道那是HTML5 ,尽管做HTML5还为时尚早。


For some odd reason the part where objects are shown and hidden in my script doesn't seem to be working. I'm not sure if its the fact firefox doesn't like that or whether its the function-based code I have (to save duplicating lines of code)?

There is a working example here and the javascript is here

** Here is the jquery **

$(document).ready(function(){

totUpPrices();
checkBedType();
checkHeadboardOption();

$('.bedtype_price').click(function()
{
    checkBedType(); 
});

$('.headboard_option').click(function()
{
    checkHeadboardOption();
});

$('#bed-floater').scrollFollow({ offset:10 });
$('.texture').click(function()
{

    $('.texture').removeClass("checked");
    $('.texture').children("input").attr("checked","");

    $(this).addClass("checked");
    $(this).children("input").attr("checked","checked");

});

$('.pricechanger_auto').change(function()
{
    totUpPrices();
});

$('.bed-width-single').change(function()
{
    if($(this).val()=="2' 6\"" || $(this).val()=="3'")
    {
        $('.pocketmatic-mattress').attr("disabled","");
    }
    else
    {
        $('.pocketmatic-mattress').attr("disabled","disabled");
        if($('.pocketmatic-mattress').parent("select").val()=="Pocketmatic")
        {
            $('.pocketmatic-mattress').parent("select").children("option[value='']").attr("selected","selected");
        }
    }
});

$('.bed-width-twin').change(function()
{
    if($(this).val()=="4' 6\"" || $(this).val()=="6'")
    {
        $('.pocketmatic-mattress').attr("disabled","");
    }
    else
    {
        $('.pocketmatic-mattress').attr("disabled","disabled");
        if($('.pocketmatic-mattress').parent("select").val()=="Pocketmatic")
        {
            $('.pocketmatic-mattress').parent("select").children("option[value='']").attr("selected","selected");
        }
    }
});

function totUpPrices()
{

    var totalprice = 0;

    // Check Type of bed prices
    var objs = $('.bedtype_price');
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            totalprice = totalprice + parseInt($(value).attr("cost"));
        }

    });

    // Check Delivery Options
    var objs = $('.deliveryoptions_price');
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            totalprice = totalprice + parseInt($(value).attr("cost"));
        }

    });

    // Check Dropdown Prices
    var objs = $('.select_price');
    $.each(objs, function(index, value) {

        newvalue = $(value).attr("value");
        $.each($(value).children("option"), function(i, l){
            if($(this).attr("value")==newvalue)
            {
                totalprice = totalprice + parseInt($(this).attr("cost"));
            }

        });

    });
    $('#totalincvat').text(totalprice);
}

function checkBedType()
{
    var objs = $('.bedtype_price');
    var checkedType = '';
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            checkedType = $(value).val();
        }

    });
    if(checkedType == "Single Bed")
    {
        $('.show_with_single').show();
        $('.show_with_twin').hide();
        $('.changeOnTwin').text("Would you like a headboard?");
    }
    else
    {
        $('.show_with_twin').show();
        $('.show_with_single').hide();
        $('.changeOnTwin').text("Would you like headboards?");
    }
}

function checkHeadboardOption()
{
    var objs = $('.headboard_option');
    var checkedType = '';
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            checkedType = $(value).val();
        }

    });
    if(checkedType == "Yes")
    {
        $('.headboard-options').show();
    }
    else
    {
        $('.headboard-options').hide();
    }
}

});

All help appreciated

解决方案

Your HTML does not validate. See here,

http://validator.w3.org/check?uri=http%3A%2F%2Fbed-adjustable.co.uk%2Fbuild-a-bed%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The very first line of your html is already invalid.

Sorry your first line is ok, I didnt know that was HTML5, though it is pretty early to do HTML5.

这篇关于Jquery .show()和.hide()甚至是.css({“display”:“none”});不工作在Firefox?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆