jquery 的 .css() 不改变可见性

Question

我想通过 jquery 的 css() 函数更改元素的可见性，但它不起作用。有趣的是，相同的语法在我网站的其他地方也可以使用，我什至可以在同一行代码中更改 CSS 参数和值 并且它会起作用。但它不适用于可见性。

我的查询：

$('.promo_container').each(function(promoIndex){

    var $_this = $(this);

    $_this.css({'visibility':'visible'});

    console.log($_this); //This is the correct output ie. the right element

});

令人困惑的是，我在另一个 js 文件中使用了这种语法并且它可以工作。让我大吃一惊的是，如果我改变这条线......

$_this.css({'visibility':'visible'});

...到这个...

$_this.css({'background':'red'});

...它有效！我在 chrome 中打开我的开发者控制台，我可以看到背景颜色的动态设置样式。当我切换回更改可见性时，我的控制台中没有动态设置的样式；它将visibility 显示为hidden，没有任何内容覆盖它。但它应该被覆盖，不是吗？

编辑

请记住，问题不是我看不到我的元素，而是动态应用的样式在我的开发者控制台中没有显示任何内容。另外，如果我在控制台中取消选中 visibility:hidden 参数，则元素会显示，所以这是唯一隐藏元素的东西。

我刚刚试过这个：

$_this.show();

它不工作。该元素保持隐藏状态。我知道我没有针对错误的元素，因为再一次，如果我在不更改选择器的情况下更改 CSS，它就可以正常工作；唯一的问题是 CSS 设置可见性时。

$_this 的 CSS：

overflow:hidden;
visibility:hidden;
position:relative;
height:100%;

HTML 应该不是问题...但这是我的元素的标记：

<div class="promo_container" data-random="{if $controller->startOn == 1}random{/if}">
    ...
    //That is Smarty syntax inside the element above, 
    it is working fine and should not be affecting anything
</div>

编辑 2

这是一个错字。我有visibile 而不是visible。 :D

Answer 1

我猜有一个 CSS 代码覆盖了您的代码。你能试试吗

$(this).css({'visibility':'visible !important','display':'block',opacity:1}); 

Answer 2

你使用：$_this.css({'visibility':'visible'});只有当你有：

visibility:hidden 在 css 中 但如果您使用的是 display:none;在你的 CSS 中

你应该使用jquery显示功能

您的代码将是：

$('.promo_container').each(function(promoIndex){

    var $_this = $(this);

    $_this.show();

    console.log($_this); //This is the correct output ie. the right element

}

Answer 3

我独立尝试了您的代码，以下似乎工作正常：

$('.promo_container').each(function(promoIndex){
    alert(promoIndex);
    var $_this = $(this);
    $_this.css({'visibility' : 'visible' });
})

查看演示：http://jsfiddle.net/audetwebdesign/9mgVt/

其他事情正在发生......

Answer 4

可以通过多种方式隐藏元素。

例如，它可以具有display: none CSS 属性或hidden="hidden" HTML 属性。

jQuery 有一个方法.show() 可以解决所有这些情况。