啟用其他功能后如何禁用Javascript功能？

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時，它將等待您單擊任何class="editable" ，... $("div.editable").click(function (e) { ...它使用這些參數執行該函數。

我只需要一個只能一次啟用帶有參數的功能的修補程序。

當前，在具有class =“ editable”的div上單擊ID為“ border_button”或“ background_color_button”或“ opacity_button”的所有三個div時，它將使用所有三組參數執行該函數。

這不好。 我不知道。

Answer 1

您不能“禁用”功能，但可以設置一個變量以強制其立即退出：

 var stopMe = true

 function myFunction() {

   if(stopMe) {

      return;

   } 

  ...

 }

Answer 2

使用特定的類運行用於tag的函數。 函數的末尾從標記中刪除此類。

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

• 將功能更改為此：

  函數Fos（inputSel，someValue，cssProperty）{

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

  }