Question

让我解释一下麻烦是什么。我有两个功能： compute（）; 和 discount_compute（）; 。当页面第一次加载时，两个函数都执行一次（好的，因为discount_compute（）是计算的一部分，所以它总是在执行compute（）时运行）。当我打开#autobid-panel（最初设置为display：none）时，函数discount_compute运行1次，因为 $（'＃autobid'）。on（'click'，function（），但是由于'[data-slider]'）on（'change.fndtn.slider'），它还会再运行2次。每次关闭或打开此自动面板时，再次初始化滑块。我只想在打开#autobid-panel时运行一次discount_compute（）。有什么想法吗？

function compute() {
//first function
};

function discount_compute() {
//second function
};

$(document).ready(function($) {

   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $(document).foundation('slider', 'reflow');
            discount_compute();
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

   $('[data-slider]').on('change.fndtn.slider', function(){
     discount_compute();
   });

});

感谢您的帮助！

Answer 1

您没有真正解释数据滑块的原因，或者如果您不想运行它，为什么还要调用discount_compute();。

你可以做的一件坏事是这样的：

function compute() {
//first function
};

function discount_compute() {
//second function
};

var harRun=false;
$(document).ready(function($) {
   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $(document).foundation('slider', 'reflow');
            if(hasRun != true) {discount_compute(); hasRun=true;}
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

   $('[data-slider]').on('change.fndtn.slider', function(){
     if(hasRun != true) {discount_compute();}
   });
});

这样，一旦hasRun设置为true，您就不再调用discount_compute()。

Answer 2

遗憾的是$(document).foundation('slider', 'reflow');会触发change事件，因此没有任何好办法。

一种方法是在off和reflow之后on之前发生事件： -

function compute() {
//first function
};

function discount_compute() {
//second function
};

$(document).ready(function($) {

   $('.price').change(compute).change();

   $('#autobid').on('click', function() {
     if ($(this).is(':checked')) {
          $('#autobid-panel').removeClass("hide");
          $('[data-slider]').off('change.fndtn.slider', discount_compute);
          $(document).foundation('slider', 'reflow');
          $('[data-slider]').on('change.fndtn.slider', discount_compute);
            discount_compute();
        } else {
          $('#autobid-panel').addClass("hide");
          $(document).foundation('slider', 'reflow');
        }
   });

   $('#discount').on('change', function(){
     var value = $(this).val();
     $('.range-slider').foundation('slider', 'set_value', value);
     discount_compute();
   });

});

jQuery事件和函数触发器问题

2 个答案: