2012-01-12 2 views
1

.live 애스펙트가 작동하므로 링크를 클릭하면 내 함수가 실행되지만 컨텐츠에 대한 직접 링크 옵션을 포함시키는 방법을 찾으려고합니다. 게다가. 다음과 같은 내용 :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"); 
    } 

     }); 

가장 내가 놓친 중요한 부분은 기본 동작과 그것을 재정의하는 것이 었습니다 ... 덕분에 Graydot!

이제 링크를 클릭하면 div가 표시되지만 URL을 입력하면 표시되지 않습니다.

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

내가 여기에 변수 showDiv를 채우는 기능을 포함하지 않았다,하지만 난 그것을 정상적으로 '자주 묻는 질문'을 포함하는 콘솔에서 확인했습니다.

누구나 내가 아직 누락 된 부분을 볼 수 있습니까?

감사합니다.

최종 업데이트 : 솔루션은

나는 처음에는 이해하지 못했지만,이 솔루션은 내 접근 방식을 다시 생각해야 입증했다. 나는 누군가가 내 무지를 통해 볼 수 있었고 훌륭한 해결책을 찾았 음을 감사한다. 이와

$(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 = "http://mydomain.com에서 href가 것처럼 간단 할 수 있습니다 : 여기

는 작업 코드 예제/mypage # faq ". 변수의 URL을 구문 분석하거나 IF 문을 사용하여 탐색 링크 또는 외부 링크의 차이를 알릴 필요가 없습니다.

희망이 다른 사람에게 도움이되기를 바랍니다. 그렇다면 나는 그다지 무식하지 않을 것입니다! ;)

+0

질문 불분명 것! 좀 더 명확하게 설명하십시오. –

+0

더 좋습니까? –

+0

죄송합니다. 더 분명 할 수 있습니다. 사용하고있는 링크에 대한 html과 라이브 또는 링크 여부를 어떻게 다르게 할 것인지 게시하십시오. –

답변

1

아마도 해시 태그를 사용 하시겠습니까? "click"이벤트 대신 "hashchange"이벤트에 바인딩하면 원하는 결과를 얻을 수 있습니다.

// 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> 

처럼 클릭 가능한 링크 모양을하고 당신은 클릭, 북마크 된 자바 스크립트 기능을 가지고있다. URL 해시가 변경 될 때마다 hashchange 이벤트가 즉시 트리거됩니다. 여기 http://jsfiddle.net/xff82/

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

+0

제 질문은 아마도 명확하지 않았습니다. 두 시나리오를 IF 문으로 결합하는 방법을 알아 내려고하는 중입니다. 따라서 두 경우 모두 true이면 내 코드가 나타납니다. –

+0

해시 변경 이벤트가 사용자의 요구에 맞지 않는 이유는 무엇입니까? – Blazemonger

+0

나는 그것에 대해 충분히 이해하지 못한다고 생각한다. hashchange를 검색 할 때 jQuery Hashchange 플러그인에 대한 많은 참조가 있습니다. 그게 당신이 사용하고있는 것입니까? 귀하의 답변을 면밀히 살펴보면 더 나은 해결책이 될 수있는 곳을 알 수 있으며, 링크가 동일한 페이지 또는 다른 페이지에 있는지 여부를 확인할 수 있습니다. –

1

Jsfiddle 스크립트는

<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>