Jquery Var返回爲對象

Question

我想將一個變量從一個函數傳遞給另一個函數，但是var elmId作爲一個對象返回並給出一個錯誤。當我們點擊任何生成的div時，我們應該能夠通過從下拉菜單中選擇寬度/高度值來更改div的大小。

我想通過點擊div ID是elmId函數displayVals，但它不工作。如果我們用函數displayVals中的「＃」+ elmId替換爲用「＃divid1」創建的第一個div的實際ID，那麼它就起作用。爲什麼var值elmId沒有傳遞到displayVals

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

• 按鈕將創建divid[X]
• 爲你」重新生成它們，你需要你live
• 點擊.divs之一將放在ID名裏的selecteddiv
• 只是告訴你選擇哪一個.selected類將被添加（如當click事件被連接到.divs類不存在）到這個div
• 時，你會改變的價值.change事件會踢，如果selecteddiv不爲空，那麼它將改變寬度和高度
• 你可以將最後一行displayVals();因爲你沒有任何開始時創建的div

我希望這是有幫助的足夠:)

乾杯

G.