页面加载后未定义jQuery DOM元素？ (Magento 2)答案

【问题标题】：jQuery DOM element not defined AFTER page load? (Magento 2)页面加载后未定义jQuery DOM元素？ (Magento 2)
【发布时间】：2017-12-18 14:16:57
【问题描述】：

我正在使用 jQuery 在 Magento 2 中工作，我有以下代码：

require(["jquery"], function($) {
    var productCarousel = $('.product-carousel-slideshow');
    console.log(productCarousel);
}

元素按预期记录到控制台，但是一旦加载页面，我就无法对元素执行任何操作，如果我在控制台中键入 productCarousel，它没有定义，是什么原因造成的？

【问题讨论】：

欢迎来到 Stack Overflow！请带上tour，环顾四周，并通读help center，尤其是How do I ask a good question? “一旦页面加载，我就无法对元素进行任何操作” 向我们展示你在哪里以及如何尝试用它做某事。 “如果我在控制台中输入 productCarousel，它就没有定义” 当然不是，它不是全局的，它是一个局部范围仅到那个 require 回调。如果您在该函数内的断点处暂停，则可以从控制台访问它，否则不能。

标签： javascript jquery magento

【解决方案1】：

productCarousel 是在本地定义到 require 回调的，只需将定义全局移动，加载后就可以访问它。

【讨论】：

【解决方案2】：

如果您要覆盖 magento 模块，那么您可以简单地更改文件路径 app/design/frontend/vendor name/theme name/Module name/requirejs-config.js。如果您已创建自定义模块，则 app/code/Vendor Name/custom Module/view/frontend/requirejs-config.js

var config = {
   paths: {            
     'Owlcarousel' : 'VendorName_ModuleName/js/owl.carousel.min'     
  },   
  shim: {
    'Owlcarousel': {
        deps: ['jquery']
     }
  }
}

phtml 脚本：

 <script>
   require([
      'jquery',
      'Owlcarousel'
     ], function ($, Owlcarousel) {
       $('#.product-carousel-slideshow-<?php echo $productsliderId;?>').owlCarousel(<?php echo ($block->getAllOptions())?>);
   });

【讨论】：