Question

我在主页面中使用jquery，在内容页面中使用javascript。当单独使用Jquery时，它可以正常工作。但是当我使用javascript（内容页面）和jquery（母版页）时，母版页中的jquery停止工作。

母版页脚本

$(document).ready(function() {

// set up the accordion
$("#accordion>h3").click(function() {
    $(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});

// show active menu section
setTimeout('$("#accordion>div.activesec").slideToggle(800)', 100);

}）;

内容页面脚本

$('slideshow').style.display = 'none';
$('wrapper').style.display = 'block';
var slideshow = new TINY.slideshow("slideshow");
window.onload = function () {
    slideshow.auto = true;
    slideshow.speed = 5;
    slideshow.link = "linkhover";
    slideshow.info = "information";
    slideshow.thumbs = "slider";
    slideshow.left = "slideleft";
    slideshow.right = "slideright";
    slideshow.scrollSpeed = 4;
    slideshow.spacing = 5;
    slideshow.active = "#fff";
    slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
}

Answer 1

我认为碰撞是由您在内容页面中使用$简写引起的。 $用于表示jQuery。所以，jQuery试图解释$('slideshow').style.display，这是无效的jQuery。

用document.getElementById替换你的速记，或使用jQuery选择器。

标准JS

document.getElementById.style.display = 'none';

或jQuery

$('slideshow').css('display', 'none');

Answer 2

看起来您的选择缺少“＃”或“。”取决于天气你试图访问id或类

$('#slideshow').style.display = 'none';
$('#wrapper').style.display = 'block';

Answer 3

您正在将字符串传递给setTimeout参数。真的很糟糕。

$('slideshow').style.display = 'none';

您正在尝试使用jQuery查找<slideshow>标记，也许您缺少类或ID选择器？

另外，style方法不是我所知道的jQuery方法，所以也许你想在JavaScript对象而不是jQuery上调用它？或者也许在它上面使用.css方法？

Answer 4

好的，所以看起来其他脚本使用$，就像jQuery一样。您需要使用$.noConflict()来防止命名空间冲突：

var $j = jQuery.noConflict();

$j(document).ready(function() {

// set up the accordion
$j("#accordion>h3").click(function() {
    $j(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});

// show active menu section
setTimeout('$j("#accordion>div.activesec").slideToggle(800)', 100);

如果你不想在所有jQuery函数中使用$j而不是$，你可以在一个赋值$的函数中包装所有内容（内容页面脚本除外！）到jQuery：

(function( $ ){
  // everything inside works normally with $
})( jQuery );

Answer 5

你把你的平面javascript放在了：

$(document).ready(function() {
});

如果是，那么试着把它们放在外面。

Answer 6

最佳做法是将所有Javascript / Jquery代码放在.js文件中。然后在需要它的页面中导入.js。

通过这种方式，您的HTML将变得整洁，并且不会被整个地方的javascript混乱。

我知道我并没有真正回答你的问题，但以这种方式工作你可能会有所帮助避免它。

祝你好运

jquery和javascript冲突

6 个答案: