代码在jsfiddle外部不起作用
[英]code does not work outside jsfiddle
问题描述
There is a jsfiddle code that I'd like to use on my page. 
我想在页面上使用jsfiddle代码。
I copied css and put it into <style> tag on my page. 我复制了css并将其放入页面上的<style>标签中。 Then I separate part that starts with 然后我分开了以
$(function(){
$('.anyClass').liEqualizer({
and put it into custom.js . 并将其放入custom.js 。 And the first part that starts with (function ($) { I put into audio_frequency.js . I added its imports to head tag. The page looks like this 第一部分以(function ($) {开始，我将其输入到audio_frequency.js 。我将其导入添加到head标签中。页面如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
.sampleWrap {
margin-left: 6%;
margin-top: 5%;
}
.eqCol {
width: 80px;
margin: 0 0 0 2px;
float: left;
}
.eqItem {
height: 20px;
width: 100%;
background: transparent;
margin: 1px 0 0 0;
opacity: 0;
box-shadow: 15px 20px 0px rgba(0,0,0,0.1);
}
.eqCol .eqItem:last-child {
opacity:1 !important
}
</style>
<script src="jquery-3.2.1.slim.min.js"></script>
<script src="audio_frequency.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div class="sampleWrap d-flex">
<div class="anyClass"></div>
<div style="clear:both; padding:15px 0">
<button class="start">start</button>
<button class="stop">stop</button>
</div>
</div>
</div>
</body>
</html>
custom.js looks like this custom.js看起来像这样
$(document).ready(function() {
$('.anyClass').liEqualizer({
row:7,
col:20,
speed:20,
freq:400,
on:true
});
$('.start').click(function(){
$('.anyClass').liEqualizer('start');
return false;
})
$('.stop').click(function(){
$('.anyClass').liEqualizer('stop');
return false;
})
});
and audio_frequency looks like this 和audio_frequency看起来像这样
(function ($) {
var methods = {
init: function (options) {
var p = {
row: 7,
col: 6,
speed: 20,
freq: 400,
on: true
};
if (options) {
$.extend(p, options);
}
var eqWrap = $(this).addClass('eqWrap');
for (c = 0; c < p.col; c++) {
var eqColEl = $('<div>').addClass('eqCol').appendTo(eqWrap);
for(r = 0; r < p.row; r++){
$('<div>').addClass('eqItem').appendTo(eqColEl);
}
}
var
eqCol = $('.eqCol', eqWrap),
eqItem = $('.eqItem', eqWrap),
randomNumber = function (m, n){
m = parseInt(m);
n = parseInt(n);
return Math.floor(Math.random() * (n - m + 1)) + m;
},
eqUp = function(colEl, val) {
var
speed = p.speed,
v = p.row - val,
i = p.row,
j = 0,
flag2 = true,
eachItemUp = function(){
$('.eqItem', colEl).eq(i - 1).nextAll().stop().css({ opacity:'1' });
if ($('.eqItem', colEl).eq(i - 1).css('opacity') == 1) { flag2 = false }
else { flag2 = true }
$('.eqItem', colEl).eq(i - 1).stop(true).animate({ opacity:'1' }, p.speed, function() {
if ($('.eqItem', colEl).index(this) == v) {
if(flag2) {
eqDown(colEl,val);
}
} else {
i--;
j++;
if(i>v){
eachItemUp()
}
}
})
}
eachItemUp()
},
eqDown = function(colEl,val){
var
v = p.row - val,
i = (p.row-val),
j = 0,
speed = p.speed * 2,
eachItemDown = function(){
if (i == (p.row - val)) {
$('.eqItem', colEl).eq(i).animate({ opacity:'0' }, speed * 10)
setTimeout(function() {
i++;
j++;
if(i < p.row){
eachItemDown();
}
}, speed)
} else {
$('.eqItem', colEl).eq(i).animate({ opacity:'0' }, speed, function(){
i++;
j++;
if(i < p.row){
eachItemDown();
}
})
}
}
eachItemDown();
},
eqInterval = function(){
eqCol.each(function(){
eqUp($(this), randomNumber(0, p.row))
})
}
eqInterval()
if (p.on) {
var eqIntervalId = setInterval(eqInterval, p.freq)
$(this).data({
'eqIntId': eqIntervalId,
'eqInt': eqInterval,
'freq': p.freq,
'on': p.on
})
} else {
$(this).data({
'eqIntId':eqIntervalId,
'eqInt':eqInterval,
'freq':p.freq,
'on':p.on
})
}
}, start: function () {
if (!$(this).data('on')) {
$(this).data('eqInt')();
var eqIntervalId = setInterval($(this).data('eqInt'), $(this).data('freq'));
$(this).data ({
'eqIntId':eqIntervalId,
'on':true
})
}
},
stop: function () {
if($(this).data('on')) {
clearInterval($(this).data('eqIntId'));
$('.eqItem', $(this)).animate({opacity:0})
$(this).data({
'on':false
})
}
}
};
$.fn.liEqualizer = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' in jQuery.liEqualizer does not exist');
}
};
})(jQuery);
But when I load page I get 但是当我加载页面时
TypeError: $(...).eq(...).nextAll(...).stop is not a function[Learn More]
What is the problem? 问题是什么？ Is it trying to evaluate something before all the components are ready on the page? 是否正在尝试在页面上的所有组件就绪之前评估某些内容？
1 个解决方案
解决方案1
1 已采纳 2017-10-27 22:05:15
This $(...).eq(...).nextAll(...).stop error is because of jquery-3.2.1.slim.min.js this ist not complete. 此$(...).eq(...).nextAll(...).stop错误是由于jquery-3.2.1.slim.min.js导致的，此操作尚未完成。
Note:
In the jquery.slim.js, the following functions of code are removed:
- jQuery.fn.extend
- jquery.fn.load
- jquery.each // Attach a bunch of functions for handling common AJAX events
- jQuery.expr.filters.animated
- ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport, jQuery.ajaxSetup
- xml parsing like jQuery.parseXML,
- animation effects like jQuery.easing, jQuery.Animation, jQuery.speedIn the jquery.slim.js, the following function of code are removed:
Here is the complete code, you need jquery lib 这是完整的代码，您需要jquery lib
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<style> /*Layout css*/ body { margin: 0; padding: 20px 10px; text-align: center } .sampleWrap { height: 290px } /*plugin css*/ .eqWrap { margin: -1px 0 0 -2px; overflow: hidden; display: inline-block; //display:inline; //zoom:1;} .eqCol { width: 37px; margin: 0 0 0 2px; float: left; } .eqItem { height: 10px; width: 100%; background: #e7aa3b; margin: 1px 0 0 0; opacity: 0 } .eqCol .eqItem:last-child { opacity: 1 !important } </style> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <div class="sampleWrap"> <div class="anyClass"></div> <div style="clear:both; padding:15px 0"> <button class="start">start</button> <button class="stop">stop</button> </div> <div class="anyClass2"></div> <div style="clear:both; padding:15px 0"> <button class="start2">start</button> <button class="stop2">stop</button> </div> </div> <script> /*код плагина*/ (function($) { var methods = { init: function(options) { var p = { row: 7, //кол-во столбцов col: 6, //кол-во колонок speed: 20, //скорость подсветки кубиков freq: 400, //частота сигнала on: true //включено по умолчанию (true,false) }; if (options) { $.extend(p, options); } var eqWrap = $(this).addClass('eqWrap'); for (c = 0; c < p.col; c++) { var eqColEl = $('<div>').addClass('eqCol').appendTo(eqWrap); for (r = 0; r < p.row; r++) { $('<div>').addClass('eqItem').appendTo(eqColEl); } } var eqCol = $('.eqCol', eqWrap), eqItem = $('.eqItem', eqWrap), randomNumber = function(m, n) { m = parseInt(m); n = parseInt(n); return Math.floor(Math.random() * (n - m + 1)) + m; }, eqUp = function(colEl, val) { var speed = p.speed, v = p.row - val, i = p.row, j = 0, flag2 = true, eachItemUp = function() { $('.eqItem', colEl).eq(i - 1).nextAll().stop().css({ opacity: '1' }); if ($('.eqItem', colEl).eq(i - 1).css('opacity') == 1) { flag2 = false } else { flag2 = true } $('.eqItem', colEl).eq(i - 1).stop(true).animate({ opacity: '1' }, p.speed, function() { if ($('.eqItem', colEl).index(this) == v) { if (flag2) { eqDown(colEl, val); } } else { i--; j++; if (i > v) { eachItemUp() } } }) } eachItemUp() }, eqDown = function(colEl, val) { var v = p.row - val, i = (p.row - val), j = 0, speed = p.speed * 2, eachItemDown = function() { if (i == (p.row - val)) { $('.eqItem', colEl).eq(i).animate({ opacity: '0' }, speed * 10) setTimeout(function() { i++; j++; if (i < p.row) { eachItemDown(); } }, speed) } else { $('.eqItem', colEl).eq(i).animate({ opacity: '0' }, speed, function() { i++; j++; if (i < p.row) { eachItemDown(); } }) } } eachItemDown(); }, eqInterval = function() { eqCol.each(function() { eqUp($(this), randomNumber(0, p.row)) }) } eqInterval() if (p.on) { var eqIntervalId = setInterval(eqInterval, p.freq) $(this).data({ 'eqIntId': eqIntervalId, 'eqInt': eqInterval, 'freq': p.freq, 'on': p.on }) } else { $(this).data({ 'eqIntId': eqIntervalId, 'eqInt': eqInterval, 'freq': p.freq, 'on': p.on }) } }, start: function() { if (!$(this).data('on')) { $(this).data('eqInt')(); var eqIntervalId = setInterval($(this).data('eqInt'), $(this).data('freq')); $(this).data({ 'eqIntId': eqIntervalId, 'on': true }) } }, stop: function() { if ($(this).data('on')) { clearInterval($(this).data('eqIntId')); $('.eqItem', $(this)).animate({ opacity: 0 }) $(this).data({ 'on': false }) } } }; $.fn.liEqualizer = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Метод ' + method + ' в jQuery.liEqualizer не существует'); } }; })(jQuery); /*инициализация плагина*/ $(function() { $('.anyClass').liEqualizer({ row: 7, //кол-во столбцов col: 6, //кол-во колонок speed: 20, //скорость подсветки кубиков freq: 400, //частота сигнала on: true //включено по умолчанию (true,false) }); $('.start').click(function() { $('.anyClass').liEqualizer('start'); return false; }) $('.stop').click(function() { $('.anyClass').liEqualizer('stop'); return false; }) $('.anyClass2').liEqualizer({ row: 7, //кол-во столбцов col: 6, //кол-во колонок speed: 20, //скорость подсветки кубиков freq: 400, //частота сигнала on: false //включено по умолчанию (true,false) }); $('.start2').click(function() { $('.anyClass2').liEqualizer('start'); return false; }) $('.stop2').click(function() { $('.anyClass2').liEqualizer('stop'); return false; }) }); </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
代码无法在jsFiddle之外工作 - code fails to work outside a jsFiddle
无法使jsfiddle代码在jsfiddle之外工作 - Can't make jsfiddle code work outside of jsfiddle
我的Javascript代码在JSFiddle之外不起作用 - My Javascript Code doesnt work outside of JSFiddle
代码无法在Dreamweaver中的jsFiddle之外工作 - code fails to work outside a jsFiddle in dreamweaver
Javascript 代码在 JSFiddle 中有效，但在浏览器中无效 - Javascript code works in JSFiddle but does not work in browser
为什么这段代码在jsfiddle中不起作用 - Why does this code doesn't work in jsfiddle
我无法在jsfiddle之外运行一段代码 - I cannot get a piece of code to work outside of jsfiddle
iscroll-在jsfiddle中不起作用 - iscroll - does not work in jsfiddle
JSFiddle无法在本地工作 - JSFiddle does not work locally
为什么此代码在我的测试服务器上有效，但在jsfiddle上无效？ - Why does this code work on my test server but not on jsfiddle?
相关标签