jqueryのアンカータブリストのhrefに基づいてdivを表示する方法

Question

私は複数のアンカータグを持っており、それらのhref属性に一致させたいと思います。一致に基づいてdivが表示されます。私は以下のコードを使用しましたが、動作しませんでした。

<div class="form-group search-form" style="display: none;"> 
    <input type="text" class="form-control"> 
</div> 

<ul> 
    <li><a href="abc.aspx">1</a></li> 
    <li><a href="def.aspx">2</a></li> 
    <li><a href="ghi.aspx">3</a></li> 
</ul> 

if ($("li a[href='abc.aspx']")) {     
    $("input.search-form").css('display', 'block'); 
} 

Answer 1

$("li a[href = 'abc.aspx']")は常にtruthyだろう。 show()メソッドを使用して隠れ要素を表示することはできますが。

if ($("li a[href = 'abc.aspx']").length) {     
    $("input.search-form").show(); 
} 

---

toggle()方法でより具体的な。

$("input.search-form").toggle($("li a[href = 'abc.aspx']").length > 0); 

Answer 2

すべてli aの要素をループし.attr("href")とhref属性に従って要素をフィルタリングすることができます。属性値をチェックすることで、値を異ならせることができます。これにより、URL文字列の定義済みリスト（例：['abc.aspx', 'def.aspx', ...]）を使用して、そのリストをループできる汎用ソリューションを作成することもできます。さもなければ、汎用的な解決策のために、それほど精巧ではない連結文字列（li a[href='abc.aspx']）を作成する必要があります。オブジェクトは、その代わりに、それの存在を確認するためにlengthプロパティをチェックしtruthy値であるので、

$("li a").each(function() { 
    var href = $(this).attr("href"); 

    if(href === 'abc.aspx') { 
     $("input.search-form").css('display', 'block'); 
    } else if(href === 'def.aspx') { 
     $("input.search-form").css('display', 'block'); 
    } else if(href === 'ghi.aspx') { 
     $("input.search-form").css('display', 'block'); 
    } 
} 

Answer 3

私はいつもtrueに同一視されますif状態で直接jQueryオブジェクトを使用すること

を見つけるそのリンクをクリックしておりません。したがって、見つかった要素の数を検出するには、jQueryオブジェクトのlengthプロパティを使用する必要があります。

コンテンツにtoggle()メソッドを表示し、該当するa要素のセレクタのプロパティを確認することができます。これを試してみてください：

$('.input.search-form').toggle($("li a[href='abc.aspx']").length != 0); 

Working example