Проверка видимости 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(); 
}); 

Разница между вашим подходом, и это является то, что .toggle() переключения между display: none и оригиналом display Значение вместо изменения visibility.

Answer 3

Я хотел бы предложить:

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

Это позволяет избежать использования методов JQuery для обновления встроенного стиля узла и позволяет избежать установки ненужных переменных (которые затем должен обновляться по мере изменения видимости).

Это кажется лучше, чем вы говорите, я еще не испортил чистую JS, просто jQuery. Итак, вместо «this», я бы не использовал # короткую ссылку? Я делаю это объектом javascript?

Если бы остаться с более JQuery подход, то я хотел бы предложить:

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

При условии, конечно, что это span вы хотите действовать дальше.

Answer 4

Я думаю, вам не хватает на котировки visiblity

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

или

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