divにリンクしてjQuery関数をトリガーする

Question

クライアント用の製品ページがあり、SilverStripe CMS経由で製品を動的に追加しています。ここのプレビューを見ることができますhttp://codepen.io/lucymacgregor/pen/EgBRmG

私の問題は、ホームページからアクティブな製品プレビューの1つにリンクしなければならないということです。プレビューには独自のページはありませんが、いくつかのjQueryスクリプトを使用して表示と非表示のdivに過ぎません。

$(document).ready(function() { 
    $(".show").click(function(e) { 
    e.preventDefault(); 
    $(this).parents('.product-wrap').find('.product-box').fadeIn('slow'); 
    return false; 
    }); 

    $(".hide").click(function(e) { 
    e.preventDefault(); 
    $(this).parents('.product-wrap').find('.product-box').fadeOut('slow'); 
    return false; 
    }); 
}); 

だから、同時になるようにdiv要素に活性化ショーの機能を有する一方で（彼らがあるため、動的必要性のカスタム名を持っていない）私は、その製品ページにリンクすることができますが、どのように私はdiv要素にリンクしますその製品のプレビューモードで開きますか？

何とかタイトルを検索してそれに基づいてdivを開くことができると思っていましたが、その実行方法はわかりません。あなたはdiv要素にIDを割り当てた場合、あなたはURLへのリンクと最後にIDを追加することができ

Answer 1

（例えばhttp://website.com/products#laptop）

、ドキュメントが作成されると、ハッシュのURL（window.location.hash）および使用を解析その情報が一致するID属性を持つdivを表示します。ところで

---

私はこのような何かを行うた場合ように、私はまた、おそらく、単にハッシュを更新するためにクリックハンドラを変更し、DIV（https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange）を切り替えるには、ハッシュの変更を聞きたいですロジックは常に同じ制御フローに従います。

---

OH！私も言及することを忘れていた - CSSはハッシュ:targetロジックのいくつかのサポートも同様にクールです。あなたはそれについてここで読むことができます - https://css-tricks.com/on-target/ハッシュ変更への反応がどれほど複雑であるかによって、潜在的にjavascriptをスキップしてCSSを使用することができます。

Answer 2

location.hashをこのように設定して取得してください。

http://yours/page/#product-box_page_id_1

http://yours/page/#product-box_page_id_2

UPDATE：ユニークなIDを持つそれぞれのdivを設定し、あなたのdivのは、例えば、動的に生成された場合はすべての問題を避けることをお勧めしますAjax。すべてのdivが正常に読み込まれた後に、チェックURLのハッシュでこれを避けることができます。コードの下

は2ndのdivは、クラス.product-boxとfadeIn()

$(document).ready(function() { 
    $(".show").click(function(e) { 
    e.preventDefault(); 
    var div = $(this).parents('.product-wrap').find('.product-box'); 

    //set location hash to be #product-box_page_id_1 
    location.hash = div.attr("class") + "_page_id_" + div.index("body"); 

    div.fadeIn('slow'); 
    return false; 
    }); 

    $(".hide").click(function(e) { 
    e.preventDefault(); 
    $(this).parents('.product-wrap').find('.product-box').fadeOut('slow'); 

    //remove url hash 
    location.hash = ""; 

    return false; 
    }); 

    //below code should be called after all div's loaded. 
    //get hash, parse and find targeted div and fadeIn(); 
    if (location.hash.replace("#","").length>0) { 
    var divT = location.hash.replace("#", "").split("_page_id_"); 
    if ($("." + divT[0]).length) $("body ." + divT).eq(+divT[1]).fadeIn('slow'); 
    } 

}); 

を持って見つけるために、URLのハッシュを解析します