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

Question

我使用大量 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 之外)中是否有一个真正简单的解决方案或破解方法，只要 $('.lookup').hide() ; 完成并在 $('.lookup').show() ; 完成时隐藏？

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

Answer 1

尝试使用 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>