jQuery를 사용하여 <cite> 태그를 클릭 가능하게 만들기

StackOverflow https://stackoverflow.com/questions/1810956

  •  06-07-2019
  •  | 
  •  

문제

좋아, 여기 스키니가 있어...

먼저 페이지를 보고 <cite> 태그를 검색하는 jQuery 함수를 작성했습니다.그런 다음 그 안에 포함된 텍스트를 보고 하이픈을 검색합니다.하이픈을 찾으면 하이픈 앞의 모든 내용이 태그 내의 텍스트로 사용됩니다.반면 하이픈 이후의 모든 내용은 해당 URL에 대한 새 창을 여는 onlick 이벤트에 사용됩니다.

그 모습은 다음과 같습니다.

 // Custom function for <cite> tags making them clickable
 $('cite:contains("-")').each(function(){
  var split=$(this).html().match( /([\s\w]+)[\-](.+)$/i );
  $(this).text(split[1]);
  $(this).click(function(){
   window.open( split[2] );
   return false;
  });
 });

사용 방법은 다음과 같습니다.

<blockquote>
This is quoted text from some article somewhere on the web... 
<cite>Source of Quote - http://quotedsitesource.com</cite>
</blockquote>

이제 정적 페이지에서 완벽하게 작동하게 되었습니다.여기를 보아라: http://blatantwasteofspace.com/crapadoodledoo/cite-test.html

하지만 WordPress 테마에 로드된 스크립트로 구현하려고 하면 비참하게 실패합니다!여기를 보아라: http://blatantwasteofspace.com/at-random/quotes-time 이해가 안 돼요...내 말은, 정확히 동일한 버전의 jQuery를 로드하고 있다는 뜻입니다.처음에는 충돌 없는 버전을 로드하기 때문에 wp_enqueue_script('jquery')를 사용하여 jQuery를 로드했기 때문일 것이라고 생각했습니다.그래서 이를 제거하고 정적 페이지에 로드하는 것과 동일한 버전을 로드했지만 여전히 주사위는 없습니다.

어떤 아이디어가 있나요?

도움이 되었습니까?

해결책

WordPress에서는 자동으로 ASCII를 변환합니다. - 돌진하다 – 대시(페이지에 다음과 같이 표시됨) &#8211;).이 문자는 정규식의 ASCII 대시와 일치하지 않습니다.

(잘못된 자동 "스마트" 타이포그래피를 거부하세요, 여러분!En-dash는 일반적으로 1~10과 같은 숫자 범위를 나타내기 때문에 올바른 표시가 아닙니다.여기에는 em-대시 '—'가 더 적합합니다.)

인용이 실제 링크가 되어서는 안되는 타당한 이유가 있습니까?또한 처리가 더 쉬워집니다.예.

<cite><a href="http://blah">Blah</a></cite>

$('cite a').click(function(e) {
    var pop= window.open(this.href);
    return pop && !pop.closed;
});

다른 팁

내용 앞에 스크립트가로드 될 수 있습니다. 대신 이와 같은 것을 시도하면 :

$(document).ready(function(){
 $('cite:contains("-")').live('click', function(){
  var split=$(this).html().match( /([\s\w]+)[\-](.+)$/i );
  window.open( split[2] );
  return false;
 });
});

그러나 여전히 텍스트에 링크가 표시되고 제거되지 않습니다 (그리고 이전이 아닌 태그를 클릭하면 구문 분석을 수행하지만 최소한 작동해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top