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 のプロパティ 'top' を読み取れないというエラーが表示され続けます。空の作業変数を無視する必要があると明示的に述べた場合、作業変数が空になる理由がわかりません。本当に単純なことだと思いますが、このことで1時間以上頭を壁にぶつけています。どんな助けでも大歓迎です。

編集 - これが問題です。<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

attr notセレクターを試しましたか?

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

また、Tomasz は架空のNAVセレクターについても正しいです。

于 2012-07-12T00:54:38.027 に答える
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 に答える