javascript - 同一页面上的多个 Jquery 脚本冲突

Question

好的，我看到了关于这个主题的几个问题 - 我有一个 html5 页面，我正在尝试应用音乐流播放器，但 jquery 脚本与另一个 jquery 脚本冲突。

我的代码在下面，我尝试了无冲突方法但无济于事，我可能应用错了。这只是我的代码的脚本部分，我还播放了视频库；画廊播放正常，但播放器显示但根本不播放。每次我加载页面时，我都会收到一条消息，指出:Adobe Flash Player security null 正在尝试连接基于互联网的位置，该位置是 webservinghosting.ca(我正在从中流式传输该站点的站点)。

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>   

<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script> 

<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>

<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_width:          900,
    content_height:         400,
    auto:                   true,
    interval:               3000,
    continuous:             false,
    arrows:                 true,
    buttons:                true,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates  for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'fade', /* hslide/vslide/fade */
    transition_delay:       0,
    transition_speed:       500,
    show_caption:           'onload' /* onload/onhover/show */
});
});

</script>

<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div id="jp-album-art">
    <img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<ul class="jp-controls">
  <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
  <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
  <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
  <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
</ul>
<div class="jp-volume-bar">
  <div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
  ready: function () {
    jQuery(this).jPlayer("setMedia", {
      mp3: "http://209.172.54.130:9025/;stream/1"
    });
  },
  swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
  supplied: "mp3",
  solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>

Answer 1

您两次使用 jQuery 文件导致了问题。

尝试删除最后一个:

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>

如果您需要在同一页面上使用多个文件。

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>

现在要访问版本 1.1.3，您需要像这样使用 $113

$113('.element').val();

而 $ 为版本 1.6.2。