Question

使用 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。

抛出错误：

未捕获的TypeError：无法读取未定义的属性'prop'

任何解决方案？

Answer 1

看起来这一行引起了问题：

setTimeout(stateToggle, 1);

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

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

未捕获的TypeError：无法在切换功能中读取未定义的属性“prop”

1 个答案: