0

我一直在尝试一切并到处阅读，但似乎无法让它发挥作用。我到底做错了什么...

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'})
    }
});

请帮忙

4

4 回答 4

2

我想这不会像你期望的那样表现，因为你在你的函数之外定义可见性，所以它永远不会改变。我想你打算写：

$('#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'})
    }
});
于 2013-03-06T01:00:09.223 回答
1

我建议：

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

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

从你的话说这似乎好多了，我还没有搞砸纯 JS，只是 jQuery。所以不是“这个”，我不会使用#short-link吗？我让它成为一个javascript对象吗？

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

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

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

于 2013-03-06T01:05:20.137 回答
0

您正在检查事件处理程序之外的可见性，因此它本身不会真正改变。

除了 Dave 的回答之外，如果您只想切换元素的可见性，.toggle可能会起作用：

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

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

于 2013-03-06T01:02:39.663 回答
0

我猜你缺少关于可见性的引号

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

或者

 $('#short-link').css({'visibility':'visible'});
于 2013-03-06T01:10:15.803 回答