Fazendo um clicável tag com jQuery
Pergunta
Ok, então aqui está o magro ...
Eu trabalhei uma função jQuery que vai olhar primeiro para a página e procurar tags. Em seguida, ele olha para o texto contido dentro dele e procura por um hífen. Se encontrar um, então tudo antes do hífen é usado como o texto dentro da tag. Considerando que, tudo após o hífen é usado em um evento onlick que abre uma nova janela para que url.
Aqui está o que parece:
// 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;
});
});
E aqui está como ele é usado:
<blockquote>
This is quoted text from some article somewhere on the web...
<cite>Source of Quote - http://quotedsitesource.com</cite>
</blockquote>
Agora, eu tenho que trabalhar perfeitamente em uma página estática ... Veja aqui: http://blatantwasteofspace.com/crapadoodledoo/cite-test.html
No entanto, quando eu tentar implementá-lo como um script que é carregado em um tema WordPress, ele falha miseravelmente! Veja aqui: http://blatantwasteofspace.com/at-random/quotes-time
Eu não entendo isso ... Quer dizer, eu estou carregando a mesma versão exata do jQuery. No começo eu pensei que poderia ser porque eu estava usando wp_enqueue_script ( 'jquery') para carregar jQuery, uma vez que carrega a versão noConflict ... Então, eu removi que e apenas carregado a mesma versão que eu sou o carregamento na página estática, mas ainda não dados.
Todas as idéias?
Solução
WordPress é automaticamente transformar seus traços -
ASCII em –
en-traços (visto na página como –
). Este personagem não irá corresponder o traço ASCII na regex.
(Diga não ao equivocada tipografia automático “inteligente”, crianças En-traço não é nem mesmo a marca de direita como normalmente denota intervalos numéricos como 1-10 O travessão. '-' seria mais adequado aqui. )
Existe alguma boa razão para que o cita não deve ser links reais? Ele também faria o mais fácil processamento. por exemplo.
<cite><a href="http://blah">Blah</a></cite>
$('cite a').click(function(e) {
var pop= window.open(this.href);
return pop && !pop.closed;
});
Outras dicas
Pode ser que o script é carregado antes do conteúdo. Se você tentar algo como isto em vez disso:
$(document).ready(function(){
$('cite:contains("-")').live('click', function(){
var split=$(this).html().match( /([\s\w]+)[\-](.+)$/i );
window.open( split[2] );
return false;
});
});
No entanto, isso ainda vai mostrar o link no texto e não removê-lo (e ele vai fazer a análise uma vez que você clique na tag, e não antes), mas pelo menos ele deve funcionar.