Остановить Javascript от конфликта?

Question

Эй, я использую этот код яваскрипта ниже

<script type="text/javascript"> 
    var speed = 'slow'; 

$('html, body').hide(); 
$(document).ready(function() { 
$('html, body').fadeIn(speed, function() { 
    $('a[href], button[href]').click(function(event) { 
     var url = $(this).attr('href'); 
     if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return; 
     event.preventDefault(); 
     $('html, body').fadeOut(speed, function() { 
      window.location = url; 
     }); 
    }); 
    }); 
}); 
</script> 

Что делает этот код является замирание на странице на сайте для каждой ссылки, щелкнули. Моя проблема в том, что у меня есть музыкальная игра html5, которая написана так.

<ul class="graphic"> 
<li><a href="MP3 URL HERE">TITLE OF SONG HERE</a></li> 
</ul> 

Это встроенный плеер. Когда вы нажимаете кнопку закладок или заголовок, вы должны играть на одной странице. Но я понимаю, что приведенный выше код открывает ссылку на mp3 в том же окне, вместо того, чтобы воспроизводить его на той же странице.

В любом случае я могу получить код выше, чтобы не конфликтовать ни с чем на определенной странице или в определенном классе.

Answer 1

Вы можете положить атрибут data-music-link на свои музыкальные ссылки и изменить код, чтобы игнорировать их.

$('a[href]:not([data-music-link]), button[href]:not([data-music-link])').click(...)

или

$('a[href], button[href]') 
    .filter(function() { return !$(this).is('[data-music-link]'); }) 
    .click(...) 

Вы также могли бы использовать подобную стратегию, но игнорировать ссылки, оканчивающиеся на хорошо знаю медиа расширений, таких как mp3.

Наконец, вместо добавления слушателя на каждую ссылку вы должны использовать подход event delegation.

Answer 2

<a href="MP3 URL HERE" data-music-link="MP3 URL HERE">TITLE OF SONG HERE</a> 

вы можете манипулировать данных музыки-ссылку в вашей JQuery вместо HREF атрибута.