时间戳

首页 > 解决方案 > 如果类不可见，则 HTML 显示元素

jquery - 如果类不可见，则 HTML 显示元素

问题描述

我使用大量 jQuery 构建了这个精心制作的页面，基于类隐藏和显示元素。

要获得一个想法：

<p class='lookup'>You can lookup all the values.</p>

如果用户不能进行查找，我只是做一个

$('.lookup').hide() ;

在 jQuery 中。这一切都很完美，一切都很好。

现在我只在 HTML 中添加一个简单的注释。但是，对于“查找”类何时可见或不可见，该注释是不同的。（基本上是一种if else。）

<p class='lookup'>Show me when class lookup is visible</p>
<p ????>Show me when class lookup is not visible</p>

在 html/css 甚至 jQuery（但在现有 jQuery 之外）中是否有一个非常简单的解决方案或 hack 可以在完成时显示一个段落并在$('.lookup').hide() ;完成时隐藏$('.lookup').show() ;？

我只是好奇，我已经使用了一个额外的类“noLookup”并向现有的 jQuery 添加了代码，但感觉应该有一个基本的解决方法/解决方案，我只是忽略了。

标签： jqueryhtmlcss

解决方案

尝试使用style属性选择器检查.lookup元素是否隐藏：

$("#chk").on("change", function() {
  var lookup = $('.lookup');
  if ($(this).is(':checked')) {
    lookup.show();
  } else {
    lookup.hide();
  }
});
.no-lookup {
  display: none;
}

.lookup[style*="display: none;"] ~ .no-lookup {
  display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<label>Toggle lookup</label>
<input id="chk" type="checkbox" checked />
<p class="lookup">You can look up!</p>
<p class="no-lookup">Sorry, you can't look up :(</p>

推荐阅读