2014-09-20 121 views
0

嘿,我用下面阻止Javascript衝突?

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

這段JavaScript代碼這段代碼所做的就是在網站的每個點擊該鏈接頁面褪色。我的問題是我有一個這樣寫的html5音樂播放。

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

這是一個內嵌播放器。當你點擊lay按鈕或標題時,它假設在同一頁面上播放。但是我意識到上面的代碼在同一個窗口中打開了與mp3的鏈接,而不是在同一頁面上播放它。

是否有無論如何我可以得到上面的代碼不與任何在某個頁面上或在某一類的任何衝突。

回答

0

您可以在您的音樂鏈接上放置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方法,而不是在每個鏈接上添加偵聽器。

+0

我不確定在哪裏添加上述代碼的JavaScript文件...但就音樂而言,這是你的意思'TITLE OF SONG HERE'@plalx – user32447 2014-09-20 02:18:32

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

你可以操縱你的jQuery代替HREF屬性數據音樂鏈接