未捕获的类型错误：无法读取切换功能中未定义的属性“prop”

Posted 2023-02-23

【中文标题】未捕获的类型错误：无法读取切换功能中未定义的属性“prop”

【英文标题】：Uncaught TypeError: Cannot read property 'prop' of undefined in toggle functionality

【发布时间】：2016-05-22 17:13:57

【问题描述】：

使用 jQuery 1.10。

我正在尝试手动实现类似于 toggle() 函数的两个处理程序签名的东西，因为它自 jQuery 1.8 以来已被弃用。 我将我的代码重用于两个部分 - 电子邮件通知和 Web 通知。两者都有一个带有类似切换功能的 TurnOff/TurnOn 按钮。

JS

(function($) 
  "use strict";
  Drupal.behaviors.toggleNotificationBoxes =     
    attach: function(context, settings)       

      var $emailCheck = $('#edit-email-notification');
      var $emailItems = $('.form-item-email-notify');
      var $emailToggle = $('#email-notification-toggle');
      var $webCheck = $('#edit-web-notification');
      var $webItems = $('.form-item-web-notify');
      var $webToggle = $('#web-notification-toggle');

      stateCheck($emailCheck, $emailItems);
      stateCheck($webCheck, $webItems);

      function stateCheck($checkEl, $itemsEl) 
        if ($checkEl.prop("checked") == false) 
          $itemsEl.css( "opacity": "0.5", "pointer-events": "none" );
        
      

      $emailToggle.on('click', function()  stateToggle($emailCheck, $emailToggle, $emailItems); );
      $webToggle.on('click', function()  stateToggle($webCheck, $webToggle, $webItems); );

      function stateToggle($checkEl, $toggleEl, $itemsEl) 
        //console.log($checkEl, $toggleEl, $itemsEl);
        if ($checkEl.prop("checked") == false) 
          $toggleEl.val("TURN OFF");
          $checkEl.prop("checked", true);
          $itemsEl.css( "opacity": "1", "pointer-events": "auto" );
         else if ($checkEl.prop("checked") == true) 
          $toggleEl.val("TURN ON");
          $checkEl.prop("checked", false);
          $itemsEl.css( "opacity": "0.5", "pointer-events": "none" );
        
        $toggleEl.one('click', function()  stateToggle($checkEl, $toggleEl, $itemsEl); );
        setTimeout(stateToggle, 1);
      
      
  ;
)(jQuery);

呈现的 HTML

<div>
  <div class="email-notification">
    <div class="form-item form-type-checkbox form-item-email-notification">
      <input type="checkbox" id="edit-email-notification" name="email_notification" value="1" checked="checked" class="form-checkbox">
      <label class="option" for="edit-email-notification">Email is enabled </label>
    </div>
    <input type="button" class="notification-toggle-button" id="email-notification-toggle" value="TURN ON">
    <div class="form-item form-type-checkboxes form-item-email-notify" style="opacity: 0.5; pointer-events: none;">
      <label for="edit-email-notify">Email me when </label>
      <div id="edit-email-notify" class="form-checkboxes">
        ...//irrelevant code
        </div>
  </div>
  <div class="web-notification">
    <div class="form-item form-type-checkbox form-item-web-notification">
      <input type="checkbox" id="edit-web-notification" name="web_notification" value="1" checked="checked" class="form-checkbox">
      <label class="option" for="edit-web-notification">Web is enabled </label>
    </div>
    <input type="button" class="notification-toggle-button" id="web-notification-toggle" value="TURN ON">
    <div class="form-item form-type-checkboxes form-item-web-notify" style="opacity: 0.5; pointer-events: none;">
      <label for="edit-web-notify">Notify me when </label>
      <div id="edit-web-notify" class="form-checkboxes">
       ...//irrelevant code
        </div>
    </div>
  </div>
  <input type="submit" id="edit-submit--3" name="op" value="SAVE CHANGES" class="form-submit">
  <input type="hidden" name="form_build_id" value="form-ZlmPEjNntLlfxbZ5f94tbPKTPF8kFCfR-3Q_WmCXTTI">
  <input type="hidden" name="form_token" value="JUkMkak09JF_qSbGsfQAHRxUtNrQn2EpPx9z8m-Ljcw">
  <input type="hidden" name="form_id" value="user_notification_form">
</div>

我正在开发 Drupal 7，这就是为什么我在我的 js 中使用 drupal 行为 而不是 $(document).ready 。

抛出错误：

未捕获的类型错误：无法读取未定义的属性“prop”

有什么解决办法吗？

【参考方案1】：

看起来这行导致了问题：

setTimeout(stateToggle, 1);

因为上下文中没有传递参数。您可以按如下方式进行更改：

setTimeout(function() 
    stateToggle($emailCheck, $emailToggle, $emailItems);
, 1);