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

我建议：

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

这避免了使用jQuery方法更新节点的内联样式，并避免设置不必要的变量（然后必须随着可见性的变化而更新）。

这似乎比你的说法更好，我还没有用纯JS搞砸，只是jQuery。因此，不是＆＃34;而是＃34;我不会使用#sh短链接？我是否将其设为javascript对象？

如果您更愿意使用更多jQuery方法，那么我建议：

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

当然，假设您希望采取行动span。

Answer 3

您正在检查事件处理程序之外的可见性，因此它不会自行更改。

除了Dave的回答，如果您只想切换元素的可见性，.toggle可能会有效：

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

您的方法与此方法之间的区别在于.toggle()在display: none和原始display值之间切换，而不是更改visibility属性。

Answer 4

我猜你缺少可见度报价

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

或

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

检查div可见性不在jQuery中显示

4 个答案: