javascript - href リンクからハッシュをフィルタリングして選択する際の問題

Question

例: http://jsfiddle.net/dfcyb/

私はこれらの2つの変数を持っています

var inview = '#' + $("#container > .section > h1:in-viewport:first").parent().attr('id');
var $link = $('#menu a').filter('a[hash=' + inview + ']');

inviewは、特定のセクションがビューポートにあるかどうかを確認し、$link変数を使用してクラスを追加します。ここで何が間違っているのかわかりません。Inview は正常に動作していますが:

$link.parent().addClass('selected');

何もしません。ここで何が間違っているのか、console.log($link) が役に立たないため、デバッグの方法がよくわかりません。ここでフィルターが使用されているかどうかわかりませんか？

Answer 1

a[hash=する必要がありますa[href$=

どこ$=で終わるかを意味します。

交換：

... $('#menu a').filter('a[hash=' + inview + ']');

と：

... $('#menu a[href$="' + inview + '"]');

ソース: http://api.jquery.com/attribute-ends-with-selector/

Answer 2

私はあなたが欲しいと思います：

$("#container > .section > h1.in-viewport:first")

それ以外の：

$("#container > .section > h1:in-viewport:first")

これが#undefinedの由来であり、jsfiddleのサンプルコードにはH1タグがありません。

Answer 3

jsFiddle には多くの問題があります。

まず、:in-viewportセレクターがありません。そのためには、プラグイン (このようなもの)を使用する必要があります。

第二に、$("#container > .section > h1"). <h1>あなたの例では、タグはありません。

第三に、<a>タグにはhash属性がありませんa[href='']。

4 番目$linkは<a>タグですが、CSS では、selectedクラスは<li>.

更新された例を次に示します: http://jsfiddle.net/dfcyb/1/