javascript - 代码在 jsfiddle 之外不起作用-6ren

javascript - 代码在 jsfiddle 之外不起作用

转载作者：行者123 更新时间：2023-12-03 03:10:08

有一个jsfiddle我想在我的页面上使用的代码。

我复制了css并将其放入 <style>我的页面上的标签。然后我将以

开头的部分分开

$(function(){
    $('.anyClass').liEqualizer({

并将其放入 custom.js 。第一部分以 (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看起来像这样

$(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;   
    })
});

和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);

但是当我加载页面时我得到了

TypeError: $(...).eq(...).nextAll(...).stop is not a function[Learn More]

有什么问题吗？它是否试图在页面上的所有组件准备就绪之前评估某些内容？

最佳答案

这个$(...).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:

这里是完整的代码，你需要jquery库
<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>

关于javascript - 代码在 jsfiddle 之外不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46983963/

文章推荐： javascript - HTML5 Canvas 将圆弧分成7等份并旋转

文章推荐：具有子查询分解的 Oracle DELETE 语句

文章推荐： excel - 返回所选单元格值附近的单元格值索引的函数

文章推荐： javascript - 数组推送和拼接不正确？

perl - 不能持续到循环 block 之外
我正在努力解决一个问题 Rahul 正在玩一个非常有趣的游戏。他有 N 个圆盘(每个圆盘的半径相等)。每个磁盘都有一个不同的数字，从 1 到 N 与之相关联。磁盘一个接一个地放在一堆中。 Rahul
java - 此请求的时间戳在 recvWindow 之外
我正在尝试使用此代码发出请求: public JsonObject account() throws BinanceApiException { return (new Request
emacs - 如何将所选区域粘贴到 emacs 之外？
我使用的是 Mac OS 和 emacs -nw (终端模式)。我不知道如何在 emacs 之外粘贴东西(已由 M-w 在 emacs -nw 中实现)。我知道emacs -ns可以做到。搜索互
html - 导航栏菜单内容溢出到父 div 之外
我试图让导航栏菜单出现在“标题容器”菜单中，但由于某种原因，导航栏链接流到外面(在修改浏览器窗口之前)。我不明白为什么，但我怀疑它与这一行有关: div class="collapse navbar-
hibernate - 如何将环境细节移到 EAR 之外
我们的项目是在 WAS 6.1/hibernate/struts 上使用 RAD 7.0 开发的中型 Web 应用程序，该应用程序已投入生产。目前我们在属性文件中硬编码了生产系统的 IP 地址，在 h
javascript - 将传单控件放置在 map 之外
我的要求是在传单中创建 N 类型的标记。该列表很大，无法容纳在 map 区域中。我想要类似的东西: http://blog.georepublic.info/2012/leaflet-example
spring - 将某些异常排除在报告给 Sentry 之外
如 docs 中所述，基于 spring-boot 的 Web 服务正在使用 Sentry .它工作正常，但不应将某些异常发送到 Sentry ，例如为了在某些请求上返回 HTTP 状态 410
ios:图层显示在其托管 View 之外
我已经阅读了 Apple Core Animation 文档。它说核心动画没有提供在窗口中实际显示图层的方法，它们必须由 View 托管。当与 View 配对时， View 必须为底层图层提供事件处理
javascript - 哪个事件来检查元素是否在滚动时位于视口(viewport)之外？
我试图在滚动时检查元素是否在我的视口(viewport)内。如果它在我的视口(viewport)之外，我会添加一个类来将元素固定到顶部。我用来确定元素是否在视口(viewport)之外的函数是: i
jQuery:如果用户点击 div 之外
我正在查询中创建一个弹出窗口。悬停时弹出窗口一切正常。当用户的鼠标离开 div 以关闭它时，我让它看到计时器启动。如果他在计时器完成之前再次进入 div，则计时器将被清除。这很好，但是如果用户点击
python - 如何防止玩家移动到给定区域 map 之外？
我使用名为 zonemap 的字典创建了一个 4x6 区域 map 。我在该字典中嵌套了多个字典；每个区域代表玩家可以访问并与之互动的区域。我希望能够将玩家的移动限制在该 4x6 区域，并重新显示他们
jQuery - 如何检测项目当前是否在视口(viewport)之外？
我正在构建一个页面，该页面将使用 ajax 来更新主要内容区域。用户将单击左侧菜单栏中的项目来更新右侧的 div 并包含搜索结果。我想检测用户是否向下滚动到目前为止导致右侧结果 div 移出视口(v
jQuery 拖放不允许我拖动到可滚动 div 之外？
好的，我在 div 中有一个带有拖放类的表格，其溢出设置为“自动”，这允许我隐藏部分时间表，只在底部放置一个滚动条。但是，我只是在可滚动 div 之外创建了一些可放置元素，并且我的可拖动元素无法离开可
c# - 如何可靠地检测项目何时滚动到 View 之外？
我有大量项目绑定(bind)到 ListBox，VirtualizingStackPanel 设置为它的 ItemsPanel。随着用户滚动和项目容器的创建，我做了一些工作来用数据填充项目(使用数据库
c# - 将类成员的范围限制在私有(private)之外
我想知道是否有一种方法可以将类成员的访问范围专门限定为在 C# 中获取/设置实现，以减少我意外直接访问它们的可能性。类似 private 的东西，但只允许 get/set 访问它，我想我可以将每个变量
swift - 如何使模态视图出现在 Controller 之外？
我正在尝试编写一个小游戏，以应用我自己在本类(class)中学到的概念。当游戏打开时，我想要一个自定义模态视图来告诉用户如何玩。同样，当他们输了时，我想呈现一个结果页面，该页面将位于 if 语句内。我
javascript - 我怎样才能让这个下拉列表总是显示在父 div 之外？
我有一个非常具体的 HTML/CSS 和/或 JS 问题。我在 this fiddle here 创建了一个示例显示问题。我有一个可滚动的 div，它是一个表的父级: ...我的表格行之一包
java - 将二进制文件复制到 jar 之外
我的 jar 文件中打包了一个 exe，我试图将它复制到一个临时位置，以便我可以使用 Desktop.browse() 运行它，为此我设置了一个使用 class.getResourceAsStream
javascript - 无法让我的变量将其值保留在 getJSON 之外
您好，我对这段代码有疑问。我的问题是第一个 console.log(smile_per_sec) 给了我需要的值，但是第二个给了我声明变量时给它的值。 $.getJSON( twitter
javascript - 传单标记弹出窗口延伸到 map 之外
我必须更改标记弹出窗口的默认大小以容纳我想放入其中的数据。我更改了一些 map 设置，因此当用户将其拖出 View 时，它总是会弹回最大范围。我遇到的问题是，对于靠近边缘的标记，当它的弹出窗口打开时，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 代码在 jsfiddle 之外不起作用