Question

当您点击底部的“更多”链接时，我有一个水平网站，可以持续显示我的表格/图像（我的图像在表格中）。我试图这样做，以便当我的最后一张图像/表格可见时，“更多”链接消失。我是编码的新手，但我设法编译了这个，但它不起作用。

我读到CSS总是将元素识别为可见，只要它适合页面，并且必须使用Javascript来检查它是否在页面上实际可见。感谢任何解决方案。

<script src="./lib/jquery.js" type="text/javascript">
    function() {
        if($('#finaltable').is(':visible')){
            $('#morelink').remove(this);
        }
    }
</script>
<html>
    //There are about 20 tables but the last one is ID'd as 'final table'
    <table id="finaltable">
        <tr><td>Final Table</td></tr>
    </table>

Answer 1

你不能使用jquery：visible，因为它只是基于你的元素的CSS显示不同，没有（它的父节点）以及它的宽度和高度大于0的事实。references

在你的情况下，我会使用offset属性。在“更多”按钮上的点击事件中，检查最终表的位置。

<a id="more" href="#">More></a>
<script>
    jQuery(document).ready(function () { 
      $("#more").on("click",function(e)
      {
        //finaltable display on screen
        if($("#finaltable").offset().left<=0)
        {
          $("#more").hide();
        }
      });
    });
</script>

Answer 2

请参阅window.scrollY中的setTimeout以确定您是否接近页面底部：https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY

Answer 3

您在JavaScript中声明了一个函数但没有调用它。您可以编写以下代码。

   /* Declare the function */
    var f = function() {
       if($('#finaltable').is(':visible')){
           $('#morelink').remove();
       }
    }

   /* Call the function */
   jQuery(document).ready(function () { 
      f(); 
   });

这是代码的demo。

当表可见时隐藏链接

3 个答案: