如何防止 jQuery 函数被多次初始化（涉及 Drupal 行为）？

Question

我的目标： 使用户能够加载模板（包含预设 jquery、html 和 css）以允许他们单击五个点之一以触发图像上的动画。

我的问题： 当我将这些模板中的多个加载到我的页面时，我的动画值（在本例中为 margin-left）应用的次数是页面上此模板实例的两倍。如果我的模板被加载两次，左边距设置为一个值，跳转到正确的值，然后返回，最后设置正确的值。这意味着如果我要向页面添加 10 个实例，则需要 20 倍的时间才能获得最后一个值。

在测试之前，我认为我的代码没问题，因为上下文和.once()函数，我相信它只会触发一次。

所有 html 和 CSS 都按预期运行，只是 jQuery 是个问题。

我的代码：

(function ($) {
 Drupal.behaviors.click_the_dots = {
  attach: function (context, settings) {
   $('.wrapper_class', context).once('click_the_dots', function () {
    // Prevent other buttons from being clickable until the
    // previous animation is complete.
    var animationDone = false;

    function clickDots(dotNum) {
      $('.dot_class_num_' + dotNum).click(function () {
        // Setup context, to keep animations to the container in which the dots exist.
        var findElem = $(this).parent().parent().parent().find('.inner_wrapper');
        // Prevent other buttons from being clickable until the
        // previous animation is complete.
        if (animationDone === false) {
          animationDone = true;
          // Find the visible image.
          var animatingImage = findElem.find('.dot_class_num_active');
          // Find the image that will be animating in.
          var thisImageAnim = findElem.find('.dot_num_img_src_' + dotNum);
          if (animatingImage.is(thisImageAnim)) {
            // Can't click on the same dot again, until another dot is clicked.
            animationDone = false;
            return;
          } else {
            // Animate out the already visible image.
            // Remove the visible image class as it's going to be hidden.
            findElem.find('.dot_class_num_active').removeClass('dot_class_num_active');
            // Animate it to hide to the left.
            animatingImage.animate({
              marginLeft: '-10%',
              opacity: 0
            }, 280, 'easeInOutQuad');
            // Animate in the image associated with the dot click
            // Set the image css to be further right in order to animate to left at 0.
            thisImageAnim.css('margin-left', '10%').delay(200).animate({
              marginLeft: '0',
              opacity: 1
            }, 300, 'easeInOutQuad', function () {
              // Set the now visible image to the visible image.
              thisImageAnim.addClass('dot_class_num_active');
            }).promise().done(function () {
              // Now allow the other dots to be clicked.
              animationDone = false;
            });
          }
        }
      });
    }

    // For each of the five dots.
    for (i = 1; i <= 5; i++) {
      clickDots(i);
    }
});}};})(jQuery);

我想根据需要添加尽可能多的这个 jQuery 实例，但只让函数循环一次。我不确定如何检查这是否已经完成，或者如何确保一旦至少完成一次，就不会再发生。

:)

Answer 1

我弄清楚我的问题是什么 - 我将行为附加到我的内容的包装器 class，即 $('.wrapper_class', context).once... - 这意味着它将行为附加到此 class，其中可能有很多。

我所做的是将行为附加到更高的父元素，我知道其中只有一个实例。它只附加一次，代码运行完美。

感谢上面的评论者帮我解决了我的问题！

如何防止 jQuery 函数被多次初始化（涉及 Drupal 行为）？

How to prevent jQuery function from being initialized more than once (Drupal behaviours involved)?

html

javascript

jquery

drupal

jquery-animate