隐藏和显示在jquery

我wana显示和隐藏div点击事件，我想从一个按钮做到这一点。我写了一个代码，但它不工作。隐藏和显示在jquery

<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     $('#clickme').click(function() { 

      $('.mydiv').hide(); 
     }) 

     $('.clickme').click(function() { 

      $('.mydiv').show(); 
     }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="mydiv">hiiiii</div> 
    <input type="button" id="clickme" value="clickme" /> 
</body>

来源

2012-04-25 Carlos

请不要参考我切换功能，我想这样做，从隐藏和显示 – Carlos 2012-04-25 12:40:23

HTML

<div id="divContent">Some content</div> 
<input type="button" id="btnShow" value="Hide" />

脚本

$(function(){ 
    var isVisible=true; 
    $("#btnShow").click(function(){ 
     if(isVisible) 
     { 
       $(this).val("Show") 
       $("#divContent").hide(); 
     } 
     else 
     { 
      $(this).val("Hide") 
      $("#divContent").show(); 
     } 
     isVisible=!isVisible; 
    });  
});

下面是工作样品：http://jsfiddle.net/95vXQ/5/

编辑：

isVisible = !isVisible

上面一行是下面的代码

if(isVisible) 
{ 
    isVisible =false; 
} 
else 
{ 
isVisible =true; 
}

来源

2012-04-25 12:45:30 Shyju

你的代码工作正常，但你可以告诉我为什么我们使用isVisible =！isVisible;在cod的底部 – Carlos 2012-04-25 12:53:02

@amit：即交换'isVisible'变量的值。这意味着如果这个值是真的，它就会变成错误的，反之亦然。这个可变值用于确定按钮上的文本是什么（显示或隐藏）。 – Shyju 2012-04-25 12:55:55

so this =！标志是用于交换价值 – Carlos 2012-04-25 12:57:24

试试这个：

$('#clickme').click(function() { // you're using an ID here! 
    var div = $('.mydiv'); 

    if(div.is(":visible")) { 
     div.hide(); 
    } else { 
     div.show(); 
    } 

});

要将两个事件侦听器的按钮。两者都会在点击时运行，因此div会显示并立即隐藏。

来源

2012-04-25 12:39:25 binarious

你的答案是正确的，但我瓦纳将其从隐藏和显示方法 – Carlos 2012-04-25 12:40:48

@amit检查我的编辑职位 – binarious 2012-04-25 12:42:31

试试这个：

<head> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 


$(function(){ 

$('#clickme').click(function(){ 

    if ($('.mydiv').is(":visible")) { 
     $('.mydiv').hide(); 
    } 
    else { 
     $('.mydiv').show(); 
    } 
} 
) 
}) 


</script> 


</head> 

<body> 

<div class="mydiv">hiiiii </div> 
<input type="button" id="clickme" value="clickme" /> 
</body>

来源

2012-04-25 12:40:45

你在你的jQuery混合class和id标识符。你的按钮有ID点击。在隐藏内容的第一个代码中，您正在以正确的方式引用按钮，但在第二个脚本中，您正在使用class .clickme而不是#clickme。

虽然是正确的，这个脚本会隐藏和显示在同一时间，因为这个原因，它会出现，就好像什么都没发生过：

$(function(){ 
    $('#clickme').click(function(){ 
     $('.mydiv').hide(); 
    }); 

    $('#clickme').click(function(){ 
     $('.mydiv').show(); 
    }); 
});

一个更好的办法是使用：

$(function() { 
    $("#clickme").click(function() { 
     $(".mydiv").toggle(); 
    }); 
});

正如Binarous指出的那样，第一个脚本虽然正确，但不起作用。您应该在显示时隐藏和使用该类时应用某个自定义类，或者甚至更好地使用toggle（）函数。

来源

2012-04-25 12:42:10

谢谢，这只是我的错字错误 – Carlos 2012-04-25 12:43:22

不客气！ – 2012-04-25 12:45:20

@Huske你的第一个例子不起作用。 – binarious 2012-04-25 12:46:02

当你隐藏它时，向你的div添加一个类，当你显示它时删除，并在你想做某件事之前检查它。

此代码：

$(function(){ 
    $('#clickme').click(function(){ 

     if ($('.mydiv').hasClass("hidden")) $('.mydiv').removeClass("hidden").show(); 
     else $('.mydiv').addClass("hidden").hide(); 
    }); 
})

这里是一个工作的jsfiddle：http://jsfiddle.net/V3gRH/

来源

2012-04-25 12:44:17 gabitzish

的简化版本试试：

$(function() { 
    $('#clickme').click(function() { 
     if ($('.mydiv').css('display') == "none") { 
      $('.mydiv').show(); 
     } else { 
      $('.mydiv').hide(); 
     } 
    }); 
});

来源

2012-04-25 12:49:10

你可以做一个隐藏的复选框。
点击按钮后将被检查为真。然后检查如果你再次点击按钮，它会检查是否被检查（如果它被选中 - 取消选中）.. 所以你可以添加另一个IF ..在按钮点击，检查IF复选框是否被选中，如果是显示，否则隐藏..

OMG chikidi检查自己

$（ '＃检查'）是。（：选中）{...} $（ '＃检查'）不是。（：选中）{...}

这是愚蠢的，但我可能会工作！ ; d

来源

2012-04-25 12:49:41

$(function(){ 
    $("#clickme").click(function(){ 
     var $mydiv = $(".mydiv"); 
     if ($mydiv.css("display")=="none"){ 
      $mydiv.show(); 
     } else 
     { 
      $mydiv.hide(); 
     } 
    });   
});

-- SEE DEMO --

来源

2012-04-25 12:50:17 Curt

隐藏和显示在jquery

回答

相关问题