링크를 기반으로 기능을 정의하십시오.

Question

내 페이지의 모든 기존 링크에 대해 기능을 열려고합니다.

예 :

나는이 열립니다 .PDF 링크 및 PDF 기능을 클릭

. .mp3 링크를 클릭하면 플레이어 등이 열립니다.

하지만 링크를 수정하지 않고도 할 수있는 방법이 필요합니다.

Answer 1

jQuery를 사용하면 페이지의 모든 링크에 핸들러를 쉽게 연결할 수 있습니다. 해당 처리기 내에서 href을 테스트하고 적절한 조치를 취할 수 있습니다. 당신이 링크의 특정 유형에 대한 기본 링크 탐색을 방지하려면 바로 그 유형에 대한 event.preventDefault() 전화 :

$(document).on("click","a", function(e) { 
    if (/\.pdf$/i.test(this.href)) { 
     pdfFunction(); 
    } else if (/\.mp3$/i.test(this.href)) { 
     playMP3(this.href); 
     e.preventDefault(); 
    } // etc. 
}); 

을 하나의 핸들러가 아니라 문서 수준에 부착되도록 내가 보여준 코드는 위임 이벤트 모델을 사용합니다 링크 당 하나의 핸들러를 연결하는 것보다 낫습니다. 어떤 이유로 링크 당 하나의 처리기를 원하면 $("a").on("click",...) 또는 $("a").click(...)을 사용할 수 있습니다.

Answer 2

그래서이 작업은 실제로 수행하려는 작업에 따라 다릅니다. 하지만, 내 기본 제안은 다음과 같습니다 ...

당신이 웹 페이지에서 왔다고 가정하면 (링크라고 가정 할 때), 링크의 유형을 트리거 할 수있는 방법이 있어야합니다. 매우 간단하게, 링크를 다른 유형의 링크에 추가하여 자신이 무엇인지 식별 ​​할 수 있습니다. 귀하의 HTML은 다음과 같이 보입니다.

<a href="http://path/to/file.mp3" class="mp3link">Some Song</a> 
<a href="http://path/to/file.pdf" class="pdflink">Some PDF</a> 
<a href="http://path/to/file2.pdf" class="pdflink">Some Other PDF</a> 

이제 링크 유형을 트리거하려고합니다. 어떤 일이 발생하는지 실제로 처리하는 방법은 클라이언트 쪽에서 모든 작업을 수행 할 수 있는지 아니면 더 많은 작업을 위해 서버로 다시 연결해야하는지에 달려 있습니다 (다시 원하는 작업을 결정해야합니다). JavaScript (특히 jQuery 라이브러리)를 사용하여 해당 클래스를 트리거 할 수 있습니다. 뭔가처럼 ... 당신이 상호 작용과 파일의 어떤 유형 등

$('.mp3link').on('click', function(e) { 
    e.preventDefault(); // stop the link from being clicked 

    // Define what you want to do here - ajax call back to the server or fire 
    // up a client-side media player, or whatever. 
}); 

$('.pdflink').on('click', function(e) { 
    e.preventDefault(); // stop the link from being clicked 

    // Define what you want to do here. 
}); 

... 그리고. 자, 훨씬 더 많은 정보가 없으면 훨씬 더 자세하게 들어갈 수 없지만, 애플리케이션 내에서 클라이언트/서버 상호 작용을 이해한다면,이 방법으로 연결하는 좋은 출발점이 될 것입니다.