javascript - jQuery JavaScript 在 View /窗口中检测对象

Question

好的，这可能已经被问过几十次了。但我不确定我需要搜索什么技术或术语才能找到更多相关信息。

我有一个无序列表的元素。每个人都充当我正在从事的项目的屏幕。每个元素都是浏览器窗口的大小，所以它更像是一个 powerpoint 演示文稿，如果我要用我在这里的任何逻辑来描述它的话。所以我想做的是找出任何特定幻灯片何时在 View 中处于事件状态。一个我有一些图像，我想仅在 View 处于事件状态时加载。但我真正想要的是根据我所在的幻灯片突出显示导航。导航是一个固定的元素，所以它总是在屏幕上，而其他一切只是漂浮在屏幕上，可以说。我需要这个的另一个原因是，导航直到第二张幻灯片才生效。因此，我需要一种方法来触发导航，仅当第一张幻灯片以外的每张幻灯片都在 View 中时才显示自身，并且当第一张幻灯片在 View 中时我将删除它。

希望我对此有所了解，有人有任何想法吗？

Answer 1

尝试一些方法，例如在元素进入 View 时向 View 中的元素添加一个类，在将其放入 View 时删除同一类的所有其他实例。

有点像

$('.active').removeClass('e_active');
$(this).addClass('e_active');

将使您能够找到当前的事件元素。或者，如果您使用元素 ID 来查找元素，您可以这样做

$('#element').addClass('e_active')

其中“#element”是事件元素

如果你点击元素来获取 ID，你可以使用这样的东西:

HTML:

<ul class="slides">
  <li id="elem1" class="e_active">content1</li>
  <li id="elem2">content2</li>
  <li id="elem3">content3</li>
  <li id="elem4">content4</li>
</ul>

<ul class="nav">
  <li data-link="elem1">Link1</li>
  <li data-link="elem2">Link2</li>
  <li data-link="elem3">Link3</li>
  <li data-link="elem4">Link4</li>
</ul>

然后用脚本你可以做这样的事情:

$('li', '.nav').click(function(){
  elem = $(this).data('link');
  $('.e_active').removeClass('e_active');
  $('#'+elem, '.slides').addClass('e_active');
})

这将使您能够简单地在样式表中使用 .e_active 和任何 jquery 代码来更改事件元素。

当然，如果你是在scroll或keypress上做的，方法是一样的，你只需要将函数附加到相关的事件处理程序上。

此外，对于“导航”问题，当第一张幻灯片的元素 ID 也具有类 时，您只需要使用 $('.nav').hide() e_active 和 $('.nav').show() 当它不存在时，在导航元素中添加和删除像 nav_hidden 这样的类它不会重复显示。