javascript - 改变 HTML 元素的可见性

Question

我想改变除某些特定元素之外的 HTML 元素的可见性。我希望元素处于相同的位置和对齐方式，并且只是要更改元素的可见性。有人可以帮我做吗？

我通过查看 How to hide all elements except one using jquery? 的答案尝试使用 jquery 做同样的事情但这会改变元素的位置和对齐方式。

$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position

我目前有 xpaths/CSS 选择器等我不想隐藏的元素的定位器。

例如我有这个 link .我只想查看 通过隐藏所有其他元素在它现在所在的位置。

Answer 1

可见性使用

jQuery

$("#element").css("visibility", "hidden");

CSS

#element {
visibility: hidden;
}

如果您希望除 #element 之外的所有其他元素都“不可见”:

jQuery

$(":not(#element)").css("visibility", "hidden");

CSS

:not(#element) { 
visibility: hidden; 
}

回答您的“之后”问题 - 让除一个之外的所有内容都隐形

如果您不能将“不可见”类分配给应该不可见的元素(最佳解决方案)，您可以通过这种方式只呈现一个可见的子元素，请参阅 JsFiddle .

这意味着:

• 设置所有'不可见':$("*").css("visibility", "hidden");
• 将要显示的元素设置为可见:$("#element").css("visibility", "visible");

在您的情况下，您想要显示的元素有点“嵌套”，您可以采用这种方式:

  // set all 'invisible'
  $("*").css("visibility", "hidden");

  // set visible the element with their 'sub-child'
  $("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");

不太好，但它有效。

像这样的复杂的 html 树，没有任何可能分配一些自定义类。我认为这是唯一的解决方案...