Jquery Var Returned As object
Question
I'm trying to pass a variable from one function to another, but the var elmId is being returned as an object and giving an error. When we click on any of the generated divs we should be able to change the size of the div by choosing a width / height value from the drop down menus.
I'm trying to pass the clicked div id which is elmId to function displayVals but it is not working. If we replace "#"+elmId in the function displayVals with the actual id of the first div created with is "#divid1" then it works. Why is the value of var elmId not being passed to 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>
Solution
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>
- button will create the
divid[X]
- as you're generating them dynamically you need to you
live
(as they don't exist whenclick
event is being attached to class.divs
) - click on one of the
.divs
will put the ID name insideselecteddiv
- just to show you which one is selected the
.selected
class will be added to this div - when you'll change the value
.change
event will kick in and if selecteddiv isn't empty then it will change the width and height - you can drop the last line
displayVals();
as you don't have any divs created at the begining
I hope that's helpful enough :)
Cheers
G.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow