jQuery JavaScript在视图/窗口中检测对象

jQuery JavaScript Detect object in view / window

本文关键字：检测 对象 窗口 JavaScript 视图 jQuery      更新时间：2023-09-26

好吧，这个问题可能已经问了几十次了。但我不确定我必须搜索什么技术或术语才能找到更多关于这方面的信息。

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

希望我对此有所了解，有人知道吗？

尝试在元素进入视图时将其添加到视图中，在将其放入视图时删除同一类的所有其他实例。

类似的东西

$('.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代码来更改活动元素。

当然，如果您是在滚动或按键上进行操作，方法是相同的，只需要将函数附加到relavent事件处理程序即可。

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

相关文章：