如何禁用一个Javascript函数时，另一个是启用 - How to disable a Javascript Function when a different one is Enabled?

How to disable a Javascript Function when a different one is Enabled?

我有这个函数:

$(document).ready(function(){   
    function Fos(buttonSel, inputSel, someValue, cssProperty) {
        $(buttonSel).click(function(){   
            var value = $(inputSel).attr("value");
            $("div.editable").click(function (e) { 
                e.stopPropagation();
                showUser(value, someValue, this.id)
                var css_obj={};
                css_obj[cssProperty]=value;
                $(this).css(css_obj);  
            });        
        });        
    }

这里有三个地方写函数:

Fos('#border_button', '#border-radius', 2, '-webkit-border-radius');
Fos('#background_color_button', '#background-color', 1, 'background-color');
Fos('#opacity_button', '#opacity', 3, 'opacity');

<input type="text" id="border-radius" value="20px">
<div id="border_button">BORDER RADIUS</div>
<input type="text" id="background-color" value="red">
<div id="background_color_button">Background</div>
<input type="text" id="opacity" value=".5">
<div id="opacity_button">Opacity</div>

<div id="2" class="defaultclass editable" style="<?php getStyle('2') ?>">
    something
</div>

当你点击ID= "border_button"或"background_color_button"或"opacity_button"的DIV时它等待您点击任何具有class="editable"的DIV，…$("div.editable").click(function (e) {……它执行带有这些形参的函数。

我只需要一个修复，将只允许一个功能与参数一次启用。

目前，当你点击所有三个div与ID =" border_button"，或"background_color_button"，或"opacity_button"，然后在一个div与class="editable"，它执行函数与所有三组参数

这很糟糕。我想不明白。

你不能"禁用"一个函数，但你可以设置一个变量来强制它立即退出:

 var stopMe = true
 function myFunction() {
   if(stopMe) {
      return;
   } 
  ...
 }

您似乎一遍又一遍地绑定和重新绑定相同的函数，这可能就是为什么您在那里有e.stopEventPropagation。尝试分配一次事件，然后管理当前状态(哪个按钮是活动的)，并从那里开始:

var $currentInput = null;
$("#border_button,#background_color_button,#opacity_button").click(function() {
    if ($currentInput == null) {
        $currentInput = $(this).prev();
    }
});
$("div.editable").click(function(e) {
    if ($currentInput == null)
        return;
    $(this).css(GetCssProperties());
    showUser($currentInput.val(), /* where does someValue come from? */, this.id)
    $currentInput = null;
});
function GetCssProperties() {
    if ($currentInput == null) return null;
    var value = $currentInput.val();
    if ($currentInput.attr("id") == "border-radius") return {
        "-webkit-border-radius": value
    }
    if ($currentInput.attr("id") == "background-color") return {
        "background-color": value
    }
    if ($currentInput.attr("id") == "opacity") return {
        "opacity": value
    }
}

工作示例:http://jsfiddle.net/HUJ5A/

使用特定的类运行for tag函数。在函数结束时，从标签中删除这个类。

jQuery(".myclass").click(function(){
/* do something */ 
jQuery(this).removeClass('myclass');
});

不能从你的问题中看出一切。但是这部分$("div.editable").click(function (e) {将在每次用户单击Foo arugments[0]或buttonSel时将多个点击事件绑定到div.editable。

这是一个可能的解决方案:

有一个全局变量(或HTML隐藏输入)说，lastDivClicked，存储最近点击div的id
每次这三个div中的一个被点击时更新lastDivClicked

将函数更改为:

函数Fos(inputSel, someValue, cssProperty) {

  var buttonSel = $('#lastDivClicked').val();
  $(buttonSel).click(function(){ ... }

}