Question

对于指定的网站：http://whitesandsvacationhomes.com/

Uncaught TypeError: undefined is not a function.

我没有对此网站进行编程，但之前的滑块没有响应。我可以将代码用于JSFiddle：

<ul class="rslides">
        <li><img src="http://whitesandsvacationhomes.com/wp-content/themes/whitesands/img/slide-001.jpg" /></li>
        <li><img src="http://whitesandsvacationhomes.com/wp-content/themes/whitesands/img/slide-003.jpg" /></li>
        <li><img src="http://whitesandsvacationhomes.com/wp-content/themes/whitesands/img/slide-004.jpg" /></li>
        <li><img src="http://whitesandsvacationhomes.com/wp-content/themes/whitesands/img/slide-005.jpg" /></li>
</ul>

的CSS

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

JS

$(function() {
    $(".rslides").responsiveSlides();
});

但由于某种原因，当它上传到实际网站时，它会给我未定义的错误。我错过了什么吗？

Answer 1

错误是由此行（27）引起的：

$(function() {
    $(".rslides").responsiveSlides();
});

在您的代码中，jQuery正在no conflict mode中运行。这意味着它已放弃使用美元变量。 AFAIK，这发生在大多数（所有？）WordPress网站上。

要解决此问题，您可以将$的任何更改更改为jQuery：

jQuery(function() {
    jQuery(".rslides").responsiveSlides();
});

或者，将对dollar变量的引用作为参数传递给匿名函数。在匿名函数中，您可以正常使用$：

jQuery(function($) {
    $(".rslides").responsiveSlides();
});

这将使您的滑块工作。

编辑：正如Johannes所说，你在页面上包含两次jQuery。这并不理想，因为一个版本会覆盖下一个版本并以意想不到的方式破坏事物。

Answer 2

大多数错误都是

多一个jQuery Lib
插件脚本在jQuery Lib之前执行
jQuery和其他Libs，如Prototype
...

您的网页包含2个jQuery Libs

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

和

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

未捕获的TypeError：undefined不是函数 - 滑块

2 个答案: