Ссылка на div и запуск функции jQuery

Question

У меня есть страница продукта для клиента, которую они добавляют динамически с помощью SilverStripe CMS. Вы можете увидеть предварительный просмотр этого здесь http://codepen.io/lucymacgregor/pen/EgBRmG

Моя проблема заключается в том, что мне нужно связать домашнюю страницу с одним из активированных предпросмотров продукта. В превью нет собственной страницы, они просто показывают и скрывают div через некоторый скрипт jQuery.

$(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, но я не знаю, как это выполнить.

Answer 1

Если присвоить Див идентификатор, можно связать с URL и добавить идентификатор до конца (например, http://website.com/products#laptop)

И как только документ будет готов, разобрать URLs для хэшей (window.location.hash) и использование эту информацию для отображения div с соответствующим атрибутом ID.

---

Кстати, если бы я делать что-то сделать, как это, я бы также, вероятно, изменить обработчик кликов, чтобы просто обновить хэш, и слушать изменения хэша, чтобы переключить 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: рекомендуется устанавливать каждый DIV с уникальным идентификатором и избежать каких-либо проблем, если ваш DIV, порожденных динамически, например, Ajax. но вы можете избежать этого путем проверки url-хэша после того, как все 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'); 
    } 

});