2011-01-09 10 views
0

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.Jquery Var zurückgegeben als Objekt

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> 
+0

FYI, gibt es keine Notwendigkeit '$ (e.target) [0] .id zu tun;'. Wenn Sie das tun, fügen Sie das Element in ein jQuery-Objekt ein und ziehen es dann wieder heraus. Tun Sie einfach 'e.target.id'. – user113716

Antwort

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.

+0

Großartig, das funktioniert. Ich sehe was du getan hast. Kannst du den Zweck der Rückkehr falsch erklären? – Hussein

+0

Entschuldigung alte Gewohnheit, können Sie es entfernen, es verhindert die Standardaufruf zum Handeln, wenn Sie einen Klick hinzufügen sogar (in diesem Fall nicht relevant) :) –

+0

Was ist der Unterschied zwischen var selecteddiv = und seleceddiv ohne var infront – Hussein