Modifier dynamiquement la couleur de fond d'un div créé dynamiquement en utilisant Jquery

Question

J'ai deux ensembles de fonctions, celui qui change la couleur de fond d'un div (div créé dynamiquement ou qui existe déjà) et un second Cela ajoute de nouveaux divs à l'intérieur des divs qui ont la classe = "divplace". Les événements click fonctionnent comme suit: 1) Cliquez sur le "bouton" avec ID = "background_color_button", puis sur la div dont vous voulez changer la couleur de fond. ou 2) Cliquez sur le "bouton" avec ID = "clicker" pour ajouter un div à l'intérieur d'un div.

Voici la première:

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 
     } 
    } 
} 

Et voici la deuxième:

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(""); 
}); 

Voici le document jsFiddle:

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

Mon problème est qu'une fois vous créez une Div à l'intérieur d'une Div ss = "divplace") à l'intérieur d'une Div, vous ne pouvez pas changer la couleur de cette Div créée sans ajouter une nouvelle Div. Je veux être capable de créer une quantité illimitée de Divs à l'intérieur des Divs et de toujours changer leur couleur sans ajouter de nouvelles Divs.

Merci beaucoup!

Taylor

Answer 1

Après avoir regardé l'exemple, ce que je pense que votre vouloir faire est de réaliser que la dernière action que vous avez sélectionné (soit le changement de couleur ou ajouter div) et non à la fois. Si oui, cela fera:

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

Fondamentalement, l'action quand on clique sur l'autre est effacé. De cette façon, chaque clic change la couleur ou ajoute une div, mais pas les deux.

En outre, il existe de nombreuses façons d'améliorer votre code. En particulier:

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

Vous définissez $ currentDiv = null, puis vérifiez s'il est nul. Il sera toujours nul puisque vous l'avez mis à null. Alors vous le mettez à autre chose, fondamentalement le = null et le si sont inutiles. Ceci est equivilent:

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