Question

嘿我正在使用下面的这个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>

此代码的作用是在网站的页面中为每个单击的链接淡入淡出。我的问题是我有一个像这样写的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 属性。

阻止Javascript冲突？

2 个答案: