动态改变动态创建的div使用jquery的背景颜色

Question

我有两套功能，其中一个改变div的背景颜色（一个动态创建的div或一个已经存在的）和第二个在div =中添加了具有class =“divplace”的新div。

点击事件的工作是这样的： 1）点击ID =“background_color_button”的“按钮”，然后在要更改背景颜色的div上。 或 2）单击ID =“clicker”的“按钮”在div内添加一个div。

以下是第一条：

var $currentInput = null; 

$("#background_color_button").live("click", function() { 
    $currentInput = null; 
    if ($currentInput == null) { 
     $currentInput = $(this).prev(); 
     $("label").html($currentInput.attr("id")); 
    } 
}); 


var editid; 
$("div.editable").live("click",function(e) { 
    e.stopPropagation(); 
    if ($currentInput == null) 
     return;  
    var css = GetCssProperties();  
    $(this).css(css); 
    $("label").html(""); 
}); 

function GetCssProperties() { 
    if ($currentInput == null) return null; 

    var value = $currentInput.val(); 

    if ($currentInput.attr("id") == "background-color") { 
     return { 
     "background-color": value 
     } 
    } 
} 

这里是第二：

var $currentDiv = null; 
$("#clicker").live("click", function() { 
    $currentDiv = null; 
    if ($currentDiv == null) { 
     $currentDiv = $(this).prev(); 
     $("label").html($currentDiv.attr("id")); 
    } 
}); 


var editid; 
$(".divplace").live("click",function(e) { 
    e.stopPropagation(); 
    if ($currentDiv == null) 
     return;  
    var newdiv = "<div class='editable divplace'>The Div created inside of this div needs to be able to change the BG color without adding a new div</div>"; 
    $(this).append(newdiv); 
    $("label").html(""); 
}); 

这里是的jsfiddle文件：

http://jsfiddle.net/TSM_mac/QYAB9/

我的问题是，一旦你在Div内创建一个Div（With cla ss =“divplace”），你不能改变创建的Div的颜色而不添加新的Div。我希望能够在Div内创建无限量的Div，并且始终在不添加新Div的情况下更改其颜色。

非常感谢！

泰勒

Answer 1

看例子之后，我觉得你想要做的仅仅是执行你所选择的最后一个动作（无论是颜色的改变或添加的div），而不是两个。如果是这样，这将做到这一点：

http://jsfiddle.net/QYAB9/3/

基本上，当点击一个动作另一个被清除。这种方式每次点击或者改变颜色或者添加一个div，但不是两者。

此外，还有很多方法可以改进您的代码。特别是：

$currentDiv = null; 
if ($currentDiv == null) { 
    $currentDiv = $(this).prev(); 
    $("label").html($currentDiv.attr("id")); 
} 

您正在设置$ currentDiv = null，然后检查它是否为空。它将始终为空，因为您将其设置为空。然后你把它设置成别的东西，基本上= null和if是毫无意义的。这是equivilent：

$currentDiv = $(this).prev(); 
$("label").html($currentDiv.attr("id"));