隱藏和顯示在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

回答

相關問題