0

我试图在 jQuery 函数中忽略带有空 href 属性的 a。这是菜单：

<nav id="nav-works-screen" role="navigation">
    <ul id="nav-other-links">
        <li class="nav-title">NICHOLAS<br/> AREHART</li><br/>
        <li><a href="">CV/Bio</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">News</a></li>
        <li><a href="<?php randLink() ?>">Link???</a></li>
    </ul>
    <ul id="nav-works">
        <li class="nav-title">WORK</li><br/>
        <li class="work"><a href="#the-speech">The Speech</a></li>
        <li class="work"><a href="#forms-derived-from-a-code">Forms Derived from a Code</a></li>
        <li class="work"><a href="#unauthorized-reproduction">Unauthorized Reproduction</a></li>
        <li class="work"><a href="">Newport Ads</a></li>
        <li class="work"><a href="">An Illegally Downloaded Film</a></li>
        <li class="work"><a href="">Hold on to Your Genre</a></li>
        <li class="work"><a href="">Autonomy</a></li>
        <li class="work"><a href="">Ikea Objects</a></li><br/>
        <li id="nav-arrows"> 
            <div class="nav-arrows">
                <a class="nav-arrow-prev" href="">&laquo;</a>
            &emsp;&emsp;
                <a class="nav-arrow-next" href="">&#187;</a>
            </div>
        </li>
    </ul>
</nav>

锚点：

<div id="content" class="clrfx">

    <div id="primary" class="clrfx">
        <div id="the-speech" class="page odd the-speech">
            <div class="page-content">
                <h2>The Speech</h2>
            </div>
        </div>

        <div id="forms-derived-from-a-code" class="page even forms-derived-from-a-code">
            <div class="page-content">
                <h2>Forms Derived from a Code</h2>
            </div>
        </div>

        <div id="unauthorized-reproduction" class="page odd unauthorized-reproduction">
            <div class="page-content">
                <h2>Unauthorized Reproduction</h2>
            </div>
        </div>

    </div><!-- #primary -->

</div><!-- #content -->

这是jQuery：

<script type="text/javascript">
    $(document).ready( function() {
        $('#nav-works-screen a').smoothScroll();

        $(document).scroll( function(){
            $('nav a').each( function(){
                var workLink = $(this);
                var work = workLink.attr('href');

                if (work != '') {

                    var workTop = $(work).offset().top;
                    var currentPos = $(window).scrollTop();
                    var winHeight = $(window).height();

                    if (currentPos >= workTop) {
                        workLink.css({'background-color':'#38FF4F'});
                        workLink.parent().siblings().children().css({'background-color':'transparent'});
                    }
                    else {
                        workLink.css({'background-color':'transparent'});
                    }
                }
            });
        });
    });
</script>

不幸的是，我不断收到一个错误，即 null 的属性“顶部”无法读取。如果我明确声明应该忽略任何空的工作变量，我不明白为什么工作变量会为空。我确信它真的很简单，但我已经用这个东西把头撞在墙上一个多小时了。任何帮助将非常感激。

编辑 - 这就是问题所在：<li><a href="<?php randLink() ?>">Link???</a></li>我猜我的随机链接 php 函数与遍历 DOM 的 jQuery 搞砸了，但我很好奇为什么。

4

3 回答 3

0

好吧，这实际上对我有用，但我不得不更改选择器

$('nav a').each( function(){

至

$('#nav-other-links a').each( function(){

因为您的 html 提取中没有“nav”元素。但是你应该放置一个

alert(work);

在 if 语句之前并检查在空 href 时“工作”到底是什么，当它不是空字符串时。

于 2012-07-12T00:26:43.043 回答
0 
    $(document).scroll( function(){
        $('nav a').each( function(){
             // if the href evaluates to false then return false
             if(!$(this).attr('href')){return false;}
于 2012-07-12T00:40:39.703 回答
0

您是否尝试过attr not选择器？

$('#nav-other-links a[href!=""').each(function() {
    //
});

此外，Tomasz 对虚构NAV选择器的看法是正确的。

于 2012-07-12T00:54:38.027 回答