Question

我有这个功能：

$(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时它等你点击任何DIV with class =“editable”，... $（“div.editable”）。click（function（e）{...它用这些参数执行函数。

我只需要一个只允许一次启用参数的ONE功能的修复。

目前，当您点击ID为“border_button”或“background_color_button”的所有三个div，或者对class =“editable”的div上的“opacity_button”AND THEN时，它会执行包含所有三组参数的函数

这很糟糕。我无法理解。

此致

泰勒

Answer 1

你无法“禁用”某个功能，但你可以设置一个强制它立即退出的变量：

 var stopMe = true

 function myFunction() {

   if(stopMe) {

      return;

   } 

  ...

 }

Answer 2

使用特定类运行标记函数。函数的结尾将从标记中删除此类。

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

});

Answer 3

不能告诉你问题的所有内容。但是，每次用户点击$("div.editable").click(function (e) {或div.editable时，此部分Foo arugments[0]都会将多个点击事件绑定到buttonSel。

Answer 4

你似乎一遍又一遍地绑定并重新绑定相同的函数，这可能就是你在那里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/

Answer 5

这可能是一个可行的解决方案：

有一个全局变量（或HTML隐藏输入）说，lastDivClicked，用于存储最近点击的div的ID
每次点击这三个div中的一个时更新lastDivClicked

将您的功能更改为：

function Fos（inputSel，someValue，cssProperty）{

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

}

如何在启用另一个Javascript函数时禁用它？

5 个答案: