Link zu einem div und Trigger einer jQuery-Funktion

Question

Ich habe eine Produktseite für einen Kunden, dem sie Produkte dynamisch über ein SilverStripe CMS hinzufügen. Sie können die Vorschau davon hier sehen http://codepen.io/lucymacgregor/pen/EgBRmG

Mein Problem ist, dass ich von der Homepage zu einer der aktivierten Produktvorschauen verknüpfen muss. Die Vorschauen haben keine eigene Seite, sie sind nur ein show and hide div über ein jQuery-Skript.

$(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; 
    }); 
}); 

So kann ich auf diese Produktseite verlinkt, aber wie verknüpfe ich mit dem div (sie haben keine benutzerdefinierten Namen wegen der dynamischen Bedarf), während gleichzeitig die Show Funktion auf die div aktiviert, so dass es öffnet sich im Vorschaumodus für dieses Produkt?

Ich dachte, es könnte irgendwie nach einem Titel suchen und öffnen Sie das Div basiert, aber ich habe keine Ahnung, wie das auszuführen.

Answer 1

Wenn Sie die div eine ID zuweisen, können Sie auf den URL-Link und die ID an das Ende anhängen (zB http://website.com/products#laptop)

Und sobald das Dokument fertig ist, analysieren die URLs für Hashes (window.location.hash) und Verwendung Diese Informationen, um das div mit dem passenden ID-Attribut anzuzeigen.

---

By the way, die div (https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange), wenn ich so etwas tun tun, würde ich wahrscheinlich auch den Klick-Handler ändern, einfach den Hash zu aktualisieren und höre für Änderungen Hash wechseln, so dass Die Logik folgt immer demselben Kontrollfluss.

---

OH! Ich habe auch vergessen zu erwähnen - CSS hat einige Unterstützung von Hash :target Logik, was auch cool ist. Sie können hier darüber lesen - https://css-tricks.com/on-target/ So könnten Sie möglicherweise das Javascript überspringen und CSS nur für diese verwenden, je nachdem, wie komplex Sie die Reaktion auf die Hash-Änderung sein müssen.

Answer 2

Versuchen Sie dieses Beispiel zu setzen und location.hash so zu erhalten.

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

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

UPDATE: es wird empfohlen, jedes div mit einzigartigen ID zu setzen und alle Probleme, wenn Ihr div Vermeiden dynamisch generierte z Ajax. Sie können dies jedoch vermeiden, indem Sie den URL-Hash überprüfen, nachdem alle Divs erfolgreich geladen wurden.

Im Folgenden Code wird parsen URL Hash 2nd div hat Klasse .product-box und 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'); 
    } 

}); 

zu finden