檢查div可見性不顯示在jQuery中

Question

我一直在嘗試一切，閱讀無處不在，似乎無法得到它的工作。到底我是什麼做錯了......

var visibility = $('#short-link').css('visibility'); 
$('#share-link span').click(function() { 
    if (visibility != 'hidden'){ 
     $('#short-link').css({visibility: 'visible'}); 
    } else { 
     $('#short-link').css({visibility: 'hidden'}) 
    } 
}); 

請幫

Answer 1

我想這是你期待，因爲你定義之外知名度你的功能不行爲，所以它永遠不會改變。我想你打算寫：

$('#share-link span').click(function() { 
    var visibility = $('#short-link').css('visibility'); 
    if (visibility != 'hidden'){ 
     $('#short-link').css({visibility: 'visible'}); 
    } else { 
     $('#short-link').css({visibility: 'hidden'}) 
    } 
}); 

或更高，緩存的對象，但不是財產：

var $shortLink = $('#short-link'); 
$('#share-link span').click(function() { 
    var visibility = $shortLink.css('visibility'); 
    if (visibility != 'hidden'){ 
     $shortLink.css({visibility: 'visible'}); 
    } else { 
     $shortLink.css({visibility: 'hidden'}) 
    } 
}); 

Answer 2

你正在檢查的知名度事件處理程序之外，因此它不會真的自己改變。

除了大衛的回答，如果你只是想切換元素的可見性，.toggle可能的工作：

$('#share-link span').click(function() { 
    $('#short-link').toggle(); 
}); 

你的方法之間的區別，這一次是display: none和原來的之間.toggle()切換display值而不是更改visibility屬性。

Answer 3

我建議：

$('#share-link span').click(function() { 
    this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible'; 
}); 

這避免了使用jQuery的方法來更新節點的內嵌樣式，並避免設置不必要的變量（然後必須更新能見度的變化）。

從你的說法看來，這似乎更好，我還沒有搞錯純JS，只是jQuery。所以，而不是「這個」，我不會使用＃短鏈接？我是否使它成爲JavaScript對象？

如果你寧願留在一個更jQuery的做法，那麼我建議：

$('#share-link span').click(function() { 
    $(this).css('visibility', function(i,v){ 
     return v == 'visible' ? 'hidden' : 'visible'; 
    }); 
}); 

假設，當然，它的span要採取行動。

Answer 4

我猜你是在可視性缺失報價

$('#short-link').css('visibility','visible'); 

或

$('#short-link').css({'visibility':'visible'});