Question

将脚本加载到Magento store时，我一直从浏览器控制台收到以下错误。所有它正在侦听的是div上的onclick事件但是我收到了这个错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39;点击＆＃39; null。＆＃34;

该脚本适用于JSfiddle，所以我真的不太清楚为什么它不起作用。我已尝试将其封装在$（文件）.ready（）中，但我收到同样的错误。

代码：

var step = 0;
var deviceType = "";
var modelType = "";

function showGen(){
    $('.phoneTypes').css("display", "none");

    if (deviceType == "Samsung"){
      $('.sphoneGens').css("display", "block");
    }
    if (deviceType == "iPhone"){
      $('.iphoneGens').css("display", "block");
    }
    if (deviceType == "iPad"){
      $('.ipadGens').css("display", "block");
    }
}

// Pick Device Type
$('.choicelabel').click(function(){
    deviceType = $(this).children('input').val();
    showGen();
});

//Pick Device Gen
$('.choiceType').click(function(){
    modelType = $(this).children('input').val();
    //$(".iphoneGens").css("display", "none");
    console.log(deviceType);
    console.log(modelType);
    $(this).parents(".row").hide();
});

非常感谢任何有关调试此问题的帮助。

Answer 1

<强> TL; DR：

jQuery( document ).ready(function( $ ) {
  // Code using $ as usual goes here.
  // And document is ready too
});

问题是什么？

Prototype.js在jQuery后加载，并覆盖全局$符号。

我们如何处理它？</ strong>

您仍然可以jQuery全局使用。只需在任何地方使用它，您可以使用$。

// Pick Device Type jQuery('.choicelabel').click(function(){ deviceType = jQuery(this).children('input').val(); showGen(); }); //Pick Device Gen jQuery('.choiceType').click(function(){ modelType = jQuery(this).children('input').val(); //jQuery(".iphoneGens").css("display", "none"); console.log(deviceType); console.log(modelType); jQuery(this).parents(".row").hide(); });

您还可以定义一些速记来简化它：

jQ = jQuery;

此类案例的常见最佳做法是对代码使用IIFE换行：

;(function($){ // see note-1 // Use $ here! It's jQuery now $(function(){ // be sure DOM was loaded before work with it(ex: binding events) }); })(jQuery);

这不会增加全球范围并实现我们的需要你总是可以用别名注入一些其他库（prototypejs？），你想要这个IIFE。

note-1：IIFE之前的分号保护javascript不受以前表达式的影响，错过分号将被解释为函数调用。

jQuery本身提供了这种情况的简写：

jQuery( document ).ready(function( $ ) { // Code using $ as usual goes here. // And document is ready too });

Answer 2

该网站没有使用jQuery，它使用prototypejs

Onclick无法正常工作。无法阅读属性＆＃39;点击＆＃39;为null

2 个答案: