Jquery Var返回为对象
问题描述:
我想将一个变量从一个函数传递给另一个函数,但是var elmId作为一个对象返回并给出一个错误。当我们点击任何生成的div时,我们应该能够通过从下拉菜单中选择宽度/高度值来更改div的大小。Jquery Var返回为对象
我想通过点击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>
答
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.
+0
太好了,那有效。我看到你做了什么。你能解释返回错误的目的吗? – Hussein 2011-01-09 03:54:38
仅供参考,有没有必要做`$(e.target)[0] .ID;`。当你这样做时,你将元素放入一个jQuery对象中,然后将其拉回。只要做`e.target.id`。 – user113716 2011-01-09 03:39:26