fadeOut函数无法使用多个按钮

时间:2016-03-30 04:10:17

标签: jquery

  

朋友我定义了hideMessage()函数,但我想在用户点击任何一个复选按钮时调用此函数(我有四个按钮)。我的问题是它第一次工作,但第二次点击任何按钮然后它不工作。为什么呢?

function hideMessage()
{
    $(".msg").css({"color":"Red","font-weight":"bold"}).text("Text box should not be empty.");
    $(".msg").delay(2000).fadeOut();
}
$('#check_network_button').click(function()
{
    if( $("#network_octet1_text").val()!="" && $("#network_octet2_text").val()!="" && $("#network_octet3_text").val()!="" && $("#network_octet4_text").val()!="" )
    {
        if( $("#network_octet1_text").val()==octet[1] && $("#network_octet2_text").val()==octet[5] && $("#network_octet3_text").val()==octet[6] && $("#network_octet4_text").val()==octet[7] )
        {
            $("#network_ok_text").css({"color":"Green","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-remove").addClass("glyphicon-ok");
        } else {
            $("#network_ok_text").css({"color":"Red","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-ok").addClass("glyphicon-remove");
        }
    } else
    {
        hideMessage();
    }
});
$('#check_firsthost_button').click(function()
{
    if( $("#firsthost_octet1_text").val()!="" && $("#firsthost_octet2_text").val()!="" && $("#firsthost_octet3_text").val()!="" && $("#firsthost_octet4_text").val()!="" )
    {
        if( $("#firsthost_octet1_text").val()==octet[1] && $("#firsthost_octet2_text").val()==octet[8] && $("#firsthost_octet3_text").val()==octet[9] && $("#firsthost_octet4_text").val()==octet[10] )
        {
            $("#firsthost_ok_text").css({"color":"Green","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-remove").addClass("glyphicon-ok");
        } else {
            $("#firsthost_ok_text").css({"color":"Red","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-ok").addClass("glyphicon-remove");
        }
    } else
    {
        hideMessage();
    }
});
$('#check_lasthost_button').click(function()
{
    if( $("#lasthost_octet1_text").val()!="" && $("#lasthost_octet2_text").val()!="" && $("#lasthost_octet3_text").val()!="" && $("#lasthost_octet4_text").val()!="" )
    {
        if( $("#lasthost_octet1_text").val()==octet[1] && $("#lasthost_octet2_text").val()==octet[11] && $("#lasthost_octet3_text").val()==octet[12] && $("#lasthost_octet4_text").val()==octet[13] )
        {
            $("#lasthost_ok_text").css({"color":"Green","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-remove").addClass("glyphicon-ok");
        } else {
            $("#lasthost_ok_text").css({"color":"Red","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-ok").addClass("glyphicon-remove");
        }
    } else
    {
        hideMessage();
    }
});
$('#check_broadcast_button').click(function()
{
    if( $("#broadcast_octet1_text").val()!="" && $("#broadcast_octet2_text").val()!="" && $("#broadcast_octet3_text").val()!="" && $("#broadcast_octet4_text").val()!="" )
    {
        if( $("#broadcast_octet1_text").val()==octet[1] && $("#broadcast_octet2_text").val()==octet[14] && $("#broadcast_octet3_text").val()==octet[15] && $("#broadcast_octet4_text").val()==octet[16] )
        {
            $("#broadcast_ok_text").css({"color":"Green","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-remove").addClass("glyphicon-ok");
        } else {
            $("#broadcast_ok_text").css({"color":"Red","font-size":"18px","font-weight":"bold"}).removeClass("glyphicon-ok").addClass("glyphicon-remove");
        }
    } else
    {
        hideMessage();
    }
});
$('#checkall_button').click(function()
{
    $('#check_network_button').click();
    $('#check_firsthost_button').click();
    $('#check_lasthost_button').click();
    $('#check_broadcast_button').click();
});

1 个答案:

答案 0 :(得分:0)

第一个调用是隐藏msg元素,您需要设置显示值以显示要再次显示它的元素。所以试试

function hideMessage() {
  $(".msg").show().css({
    "color": "Red",
    "font-weight": "bold"
  }).text("Text box should not be empty.");
  $(".msg").stop(true).delay(2000).fadeOut();
}