在jQuery中链接使其他脚本不起作用

时间:2014-02-21 21:58:59

标签: javascript jquery

我还是剧本新手,这是一个简单的问题。

在我正在构建的网站上,我有一些很好的小脚本功能,但是当我在jQuery中链接不同的功能时,第一个停止工作。如果我删除jQuery链接,他们会再次工作。

以下是我目前的功能:

这是我需要的jQuery,<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

// ~~~~~~~~~~ Header Background image rotation ~~~~~~~~~~ \\
$(document).ready(function(){
var header = $('.mainheader');

var backgrounds = new Array(
    'url(img/rainbow.jpg)'
  , 'url(img/chicks_on_grass.jpg)'
  , 'url(img/cattle_on_pasture.jpg)'
  , 'url(img/csa_bundle.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 10000);

header.css('background-image', backgrounds[0]);
});

下一个功能仍然可以正常工作

// ~~~~~~~~~~ ShowOrHide Element Onclick ~~~~~~~~~~ \\
function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}

这个不再适用

// ~~~~~~~~~~ Form Email Hint ~~~~~~~~~~ \\
JotForm.init(function(){
  $('input_4').hint('ex: myname@example.com');
});

所有这三个功能都包含在<script language="JavaScript"></script>标记中。

然后我有一个第三方JavaScript链接,它控制我在网站上的表单上的某些内容。 <script src="http://max.jotfor.ms/min/g=jotform?3.1.1667" type="text/javascript"></script>这与JQuery并不一致。

我不知道发生了什么,花了一整天的时间来研究它。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

这是一个冲突问题,请参阅此页面以获取更多documentation 这样做:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

var $j = jQuery.noConflict();
// ~~~~~~~~~~ Header Background image rotation ~~~~~~~~~~ \\
$j(document).ready(function(){
var header = $j('.mainheader');

var backgrounds = new Array(
    'url(img/rainbow.jpg)'
  , 'url(img/chicks_on_grass.jpg)'
  , 'url(img/cattle_on_pasture.jpg)'
  , 'url(img/csa_bundle.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 10000);

header.css('background-image', backgrounds[0]);
});

// ~~~~~~~~~~ ShowOrHide Element Onclick ~~~~~~~~~~ \\
function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}
</script>