Jquery Var zurückgegeben als Objekt

Question

Ich versuche, eine Variable von einer Funktion an eine andere übergeben, aber die Variable ElmId wird als ein Objekt zurückgegeben und gibt einen Fehler. Wenn wir auf eines der generierten divs klicken, sollten wir in der Lage sein, die Größe des div zu ändern, indem wir aus den Dropdown-Menüs einen Wert für width/height auswählen.

Ich versuche, die angeklickte div-ID zu übergeben, die ElmId ist, um displayVals zu funktionieren, aber es funktioniert nicht. Wenn wir "#" + elmId in der Funktion displayVals durch die tatsächliche ID des ersten Div ersetzen, das mit "# divid1" erstellt wurde, funktioniert es. Warum wird der Wert von var elmId nicht zu displayVals weitergegeben werden

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 
    <style> 
    .aaa{width:100px; height:100px; background-color:#ccc;} 
    button{width:100px; height:20px;}  
    </style> 

<button class="idiv">div</button> 
<select id="width"> 
    <option>100px</option> 
    <option>200px</option> 
    <option>300px</option> 
</select> 
<select id="height"> 
    <option>100px</option> 
    <option>200px</option> 
    <option>300px</option> 
</select> 
<p></p> 

<script type="text/javascript"> 
var divId = 1; 

$("button").click(function(){ 
     var elm = $('<div id=divid' + divId + ' class=aaa></div>'); 
     elm.appendTo('p'); 
     divId++; 
}); 

$("p").click(function(e){ 
    var elmType = $(e.target)[0].nodeName, 
    elmId = $(e.target)[0].id; 
    return displayVals(elmId); 
    }); 
function displayVals(elmId) { 
    var iwidth = $("#width").val(); 
    var iheight = $("#height").val(); 
    $("#"+elmId).css({width:iwidth, height:iheight}); 
    console.log(elmId); 
    } 

    $("select").change(displayVals); 
    displayVals(); 
</script> 

Answer 1

CSS:

.divs{width:100px; height:100px; background-color:#ccc;} 
button{width:100px; height:20px;}  
.selected{background:#dd0000;} 

jQuery:

<script type="text/javascript"> 
var divId=1,selecteddiv=""; 
$("button").click(function(){ 
    $('p').append('<div id="divid'+divId+'" class="divs"></div>'); 
    divId++; 
}); 

$(".divs").live("click",function(){ 
    selecteddiv=$(this).attr('id'); 
    $(this).addClass('selected'); 
    return false; 
}); 

function displayVals() { 
    if(selecteddiv!=""){ 
     var iwidth = $("#width").val(); 
     var iheight = $("#height").val(); 
     $("#"+selecteddiv).css({width:iwidth, height:iheight}); 
    } 
} 

$("select").change(displayVals); 
displayVals(); 
</script> 

• Taste wird die divid[X]
• wie Sie erstellen‘ um sie dynamisch zu generieren, müssen Sie live (Da sie nicht existieren, wenn click Ereignis Klasse angebracht wird .divs)
• Klick auf einen der .divs den ID-Namen setzen innen selecteddiv
• nur um Ihnen zu zeigen, welches ausgewählt ist aus der .selected Klasse wird hinzugefügt auf diese
• div wenn Sie den Wert .change Ereignis in kickt und displayVals(); die letzte Zeile ändern, wenn selecteddiv nicht leer ist ändern werden, dann wird es die Breite und Höhe
• Sie fallen können, wie Sie haben keine divs am Anfang erstellt

Ich hoffe, das ist hilfreich genug :)

Prost

G.