2012-01-12 7 views
1

リンクがクリックされた場合、機能が実行されますが、コンテンツへの直接リンクのオプションを含める方法を理解しようとしています。同じように。このようなもの:jQuery IF var = valueまたは#idがクリックされました

$(showDiv).is('shipping-timeline') 
or 
$("#inm_if_hc_shipping_timeline").live('click', function() { 
    [code to show and hide divs]    
}); 

showDivには、URLから抽出された適切なIDを識別する値が含まれています。

私の質問:いずれの場合もIF文を作成して実行するにはどうすればよいですか?

誰でも手助けできますか?ありがとう!

UPDATE:

だから私はGraydotの答えからIF部品を取って、自分のコードにそれを適用し、ここでそれが今どのように見えるかのより完全な例です:

$("#inm_if_hc_faq").bind('click', function(e) { 
    if(showDiv == 'faq') { 
      // prevent default behavior 
      e.preventDefault(); 

      $("#inm_if_hc_content_faq").show("slow"); 
      $("#inm_if_hc_content_shipping_timeline").hide("fast"); 
    } 

     }); 

ほとんどを私が欠けていた重要な部分は、デフォルトの動作とそれを上書きするIFを持っていた... Graydotに感謝!

リンクがクリックされると、divは必要なように表示されますが、URLが入力されたときは表示されません。

例:http://myurl.com/thispage.html?show=faq

私はここで、変数showDivを移入する機能が含まれていませんでしたが、私はそれが必要として、それは「よくある質問」を含んでいるコンソールで確認しました。

誰でもまだ私が見逃しているものを見てください。

ありがとうございます!

FINAL UPDATE:SOLUTION

私が最初にそれを理解しませんでしたが、解決策は、私のアプローチを再考することが判明しました。誰かが私の無知を見て、素晴らしい解決策を思いついたことに感謝します。ここで

は、作業コードの例を示します。これにより

$(window).bind('hashchange', function() { 
    var hval = location.hash.slice(1); 

    if (hval == "faq") { 
     $("#inm_if_hc_content_faq").show("slow"); 
        $("#inm_if_hc_content_shipping_timeline").hide("fast"); 
    } 
}); 

$(document).ready(function() { 

    $(window).trigger('hashchange'); 

}); 

、リンクはのhref =「#よくあるご質問」または別のページからのhref = "http://mydomain.comのような単純なことができ/ mypage#faq "。変数のURLを解析するか、またはIF文を使用してナビゲーションリンクまたは外部リンクの違いを伝える必要はありません。

これは他の誰かを助けてくれることを願っています。だから私はとても無知に感じる必要はありません! ;)

+0

質問は不明であるだろう!もう少し明確に説明してください。 –

+0

それは良いですか? –

+0

申し訳ありませんが、もっと明確にすることができます。あなたが使用しているリンクのhtmlと、それがライブかリンクかどうかをどのように異ならせるのかを投稿してください。 –

答えて

1

おそらくハッシュタグを使用しますか? 「クリック」イベントではなく「ハッシュチェンジ」イベントにバインドすることで、必要な結果を得ることができます。

// run specific code based on the url hash 
$(window).bind('hashchange', function() { 
    var hval = location.hash.slice(1); 
    if (hval == "timeline") { 
     // run whatever code or function you like 
    } 
}); 

// trigger it on page load 
$(document).ready(function() {   
    $(window).trigger('hashchange');  

});

は今ちょうどあなたのクリック可能なリンクが

<a href="#timeline">click me</a> 

ように見えるように、あなたはクリック可能な、ブックマーク、JavaScriptの機能を持っています。 URLハッシュが変更されるたびに、hashchangeイベントが即座にトリガーされます。

+0

私の質問はおそらく十分ではなかったでしょう。私は実際には2つのシナリオをIFステートメントに結合する方法を理解しようとしているので、どちらのケースも真であればコードが終了します。 –

+0

ハッシュチェンジイベントがあなたのニーズに合わないのはなぜですか? – Blazemonger

+0

私はそれについて十分理解していないと思う。私がhashchangeを検索すると、jQuery Hashchangeプラグインへの参照がたくさんあります。それはあなたが使っているものですか?あなたの答えを詳しく見てみると、より良い解決策がどこにあるのかを知ると、リンクが同じページにあっても別のリンクにあっても機能します。 –

1

ここJsfiddle http://jsfiddle.net/xff82/

<body> 
    <a href="#target_div">Toggle</a> 
    <div id="target_div">Some content</div> 
</body> 

スクリプトが

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('a').bind('click', function(e){ 
     // check that target points to a id, rudimentary check 
     var target = (/#\w+/).exec(this.href); // null if does not match 
     if (target){ 
     // prevent default behavior 
     e.preventDefault(); 
     //jQuery toggle. show/hide div 
     $(target[0]).toggle(); 
     } 
    }) 
    });  
</script> 
関連する問題