div에 연결하여 jQuery 함수를 호출하십시오.

Question

고객을위한 제품 페이지가 있는데, SilverStripe CMS를 통해 제품을 동적으로 추가합니다. 여기에서 그 미리보기를 볼 수 있습니다 http://codepen.io/lucymacgregor/pen/EgBRmG

내 문제는 홈 페이지에서 활성화 된 제품 미리보기 중 하나로 링크해야한다는 것입니다. 미리보기에는 자체 페이지가 없으며 일부 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를 열 수 있다고 생각했지만 그 방법을 모릅니다. 당신은 사업부에게 ID를 할당하는 경우

Answer 1

, 당신은 URL에 링크 할 수 있습니다 끝까지 (예 : http://website.com/products#laptop)

을 ID를 추가하고 문서가 준비되면, 해시의 URL (window.location.hash) 및 사용을 구문 분석 해당 정보를 사용하여 일치하는 ID 속성을 가진 div를 표시하십시오. 그런데

---

, 나는 이런 식으로 뭔가를 할 수 있다면, 나 또한 가능성이 단순히 해시를 업데이트하기 위해 클릭 처리기를 변경할 것, 그리고 해시 변경 ( https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange를) 사업부를 전환 할 수 있도록, 듣고 논리는 항상 동일한 제어 흐름을 따릅니다.

---

OH! 나도 언급하는 것을 잊었다 - CSS는 해시 :target 논리의 일부 지원뿐만 아니라 멋지다. 여기에서 읽을 수 있습니다 - https://css-tricks.com/on-target/ 해시 변경에 대한 반응이 얼마나 복잡한 지에 따라 잠재적으로 자바 스크립트를 건너 뛰고 CSS 만 사용하십시오.

Answer 2

이 예제를 설정하여 location.hash과 같이 설정하십시오.

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

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

UPDATE : 고유 ID와 각 사업부를 설정하고 사업부 년대는 예를 들어, 동적으로 생성 된 경우 어떤 문제가 발생하지 않도록하는 것이 좋습니다 아약스 그러나 당신은 모든 div가 성공적으로로드 된 후 check 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 해시를 구문 분석