0

ドロップダウン リストをページのフィルターとして機能させようとしています。フォームを作成しましたが、アンカーはそこにありますが、ドロップダウン項目をクリックしても何も起こりません。アンカーへのリンクをトリガーするにはどうすればよいですか?

私が使用していたjQueryは次のとおりです。

<script>
$("#portfolio-list").bind("change", function() {
    $("#" + this.value).show();
    $("p:not(#" + this.value + ")").hide();
});</script>

ここに私のフォームがあります：

<form name="dropdown" size="1" id="portfolio-list">
<select name="portfolio-list" id="portfolio-list">
<option value="#" rel="all" class="current">All</option> 
<option value="#custom-exhibits" rel=custom-exhibits class=custom-exhibits>Custom Exhibits</option>
<option value="#permanent-installation" rel=permanent-installation class=permanent-installation>Permanent Installation</option>
</select>
</form>

どんな助けでも大歓迎です！

4

2 に答える 2

0

投稿したコードから実際の例を作成しましょう。

最初に気付いたのは、フォーム タグと選択タグの両方に同じ id 属性があることです (id 値は HTML ドキュメント内で一意である必要があります)。そのため、"#portfolio-list"セレクターが期待どおりに機能せずchange、フォームではなくフォームに対してイベントがトリガーされます。 select タグ (サーバーにデータを送り返さない場合は、form タグは必要ありません)。

さらに、 のようなパラグラフのセレクターは"#"+this.value# で始まり、オプションの値も # で始まり、最後にセレクターは のよう"##custom-exhibitsになり、有効なセレクターではありません。

jQuery では、.val()メソッドは主にフォーム要素の値を取得するために使用され、.valueネイティブ JavaScript であり、どちらの方法も正しいですが、jQuery を使用している場合は、彼のメソッドを使用することをお勧めします。

<select name="portfolio-list" id="portfolio-list">
    <option value="all" rel="all" class="current">All</option> 
    <option value="custom-exhibits" rel="custom-exhibits" class="custom-exhibits">Custom Exhibits</option>
    <option value="permanent-installation" rel="permanent-installation" class="permanent-installation">Permanent Installation</option>
</select>

<p id="all" >paragraph1</p>
<p id="custom-exhibits" >paragraph2</p>
<p id="permanent-installation" >paragraph3</p>

<script>
jQuery(function ($) {
    $("#portfolio-list").on( 'change', function(e) {
        // get selected option value
        var val = $(this).val();
        // show element with that id
        $( '#'+val ).show();
        // hide all other elements
        $('p').not( '#'+val ).hide();
    });
});
</script>
于 2013-08-22T20:52:53.673 に答える
0

<a>あなたが投稿したコードは、タグを参照していると思われる「アンカー」とは何の関係もありません。

注意: jQuery セレクターは CSS セレクターに基づいています。先頭.は thatの要素に一致しclass、先頭は that#の要素に一致しidます。

イベント ハンドラの最初の行には、id一致する要素が表示されthis.valueます。2 行目は、一致しないもの<p>をすべて非表示にします。(ところで、jQuery は少し読みやすい関数を提供します)idthis.value.not()

重要なバグ: あなたoptionのvalues はすべて で始まり#、スクリプトはその#前に再び連結します。これはおそらくあなたが望むものではありません。

補足: 「jQuery 1.7 以降、.on() メソッドは、イベント ハンドラーをアタッチするための推奨される方法です」 . .bind()うまくいかないわけではありませんが.on()、より短く、より機能的です。

于 2013-08-22T19:21:36.127 に答える