samerhannoun Posted May 4, 2011 Share Posted May 4, 2011 Hi guys,,,, I am into developing something like the following:http://www.flexistore.co.uk/vault-estimator/ this page contains volume calculator at this page its developed using flash,,, but I want it Jquery.. I do the following as a test,, but is this logical work or are there any ideas,,,, html><head><script src="http://code.jquery.com/jquery-1.5.js"></script><style></style></head><body><div id="cont1"><img id="chair" src="chair.gif"><img id="bed" src="bed.gif"></div><br><span id="value">0</span><span id="box"></span><br>what you select:<br><span id="type"></span><script>//desclaring global variables// n = the value of volum.//then perform jquery action on click on the image invoke update function with 2 paramaters value of volum and type of objectvar chairCount=0;var bedCount=0;var c='';$("img#chair").click(function () {update($("span#value"),"chair");});$("img#bed").click(function () {update($("span#value"),"bed");});//update function for effect after user click on an image(parasing value span, check object type, assign the value, update the spans).function update(j,c) {var n = parseInt(j.text(), 10);if(c=="chair"){j.text(n + 50);chairCount=chairCount+1;if(chairCount==1){$("span#type").after("<span id='ch'>"+chairCount+c+" "+"<a href='#' onclick='a(1);'>Decrease 1</a>"+"</span>"+"<br>");}else{$("span#ch").html(chairCount+c+" "+"<a href='#'>Decrease 1</a>");}}if(c=="bed"){j.text(n + 25);bedCount=bedCount+1;if(bedCount==1){$("span#type").after("<span id='b'>"+bedCount+c+" "+"<a href='#'>Decrease 1</a>"+"</span>"+"<br>");}else{$("span#b").html(bedCount+c+" "+"<a href='#'>Decrease 1</a>");}}if((n)>=150){$("span#box").html("You need 2 boxes");}if((n)>=300){$("span#box").html("You need 3 boxes");}}function a(c){var j=$('span#value');var n = parseInt(j.text(), 10);j.text(n - 50);chairCount=chairCount-1;$("span#type").after("<span id='ch'>"+chairCount+c+" "+"</span>"+"<br>");}</script> Best Wishes Link to comment Share on other sites More sharing options...
thescientist Posted May 4, 2011 Share Posted May 4, 2011 what's the result of your efforts? Does it work? Are there errors? What exactly are you having problems with? Link to comment Share on other sites More sharing options...
samerhannoun Posted May 5, 2011 Author Share Posted May 5, 2011 what's the result of your efforts? Does it work? Are there errors? What exactly are you having problems with?the code I post is working as a demo for 2 images,, in my case there are over 50 image, so I will write a huge amount of code !!!! I think my code is solution but this is a bad solution and I believe there is a better way to enhance my code and reduce the amount of hard coded,,,In more depth if I have 50 image I will repeat this part of code 50 times$("img#chair").click(function () {update($("span#value"),"chair");});and not less 60-70 if statement is this logical?????? I was thinking about using class for html selector,,, but the image not completed in my mind cause I will send a different parameter with each selector?this is my problem.and thanks a lot for you time and consideration.Best Wisthes Link to comment Share on other sites More sharing options...
shadowayex Posted May 5, 2011 Share Posted May 5, 2011 You could give all of those images a certain class and do something like $("img.theClass").click(function() { update($("span#value"), $(this).attr("id")); }); Disclaimer: I just whipped that up. Hopefully is gets the point across, but I don't know if it'll actually work for your case. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.