Question

我在路径中添加了一个名为myweb.js的自定义js文件 /app/code/Ced/CsProduct/view/frontend/web/js/

代码是这样的：

require([
    "jquery"
    ], function($){
    $(document).ready(function() {
    alert("Hello");
    $("[data-index='painting_hieght']").hide();
    $("[name='product[size]']").change(function(){
     var status = this.value;
     alert(status);
   if(status=="103"){
      $("[data-index='painting_hieght'],[data-index='painting_width']").show();// hide multiple sections
        }else {
            $("[data-index='painting_hieght'],[data-index='painting_width']").hide();
        }
  });
    });
   });

并修改了文件csproduct_vproducts_simple.xml 在路上 app/code/Ced/CsProduct/view/frontend/layout/

文件的内容如下所示：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

        <head>
        <link src="Ced_CsProduct::js/myweb.js"/>
        </head>
    <update handle="csproduct_vproducts_superconfig_config"/>
</page>

我正确收到警告hello，这意味着该文件已正确包含。但是之后的代码似乎不起作用，尽管我已经测试了在firebug控制台中运行的代码。

我在这里缺少什么？

更新

进一步观察我发现我只清除所有缓存后第一次收到警报“Hello”。但后续重新加载并未显示任何警报。除了页面来源显示myweb.js 但在firebug调试器源文件中没有。

显然，我正在制造一些愚蠢的错误，这正在引起我的注意。

Answer 1

这似乎不正确的做法。（我的观点）

此路径中requirejs-config.js需要/app/design/frontend/VendorName/Theme/web/js/，内容如下：

var config = {
    map: {
        '*': {
            custom_js: 'VendorName_ModuleName/js/js_file_name'
        }
    }
};

在模板中，您可以调用它：

<script>
    require([
        'jquery',
        'custom_js'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });

您可以在以下主题中通过St3phan查看一个很好的解释： https://magento.stackexchange.com/questions/190821/magento2-add-js-from-admin-cms-page-design-layout-update-xml

希望有所帮助！

Magento2自定义JQuery文件包含正确但代码不起作用

1 个答案: