Better way to change content than over using .click and .html
Question
So I'm working on a little side project to learn and play with jQuery and now looking to you all for reference. If you look at my sample you can get an idea of what I'm going for but I can tell I'm going about it all wrong.
The idea is to have the header contain the top level elements (drink names). By clicking on each drink different sets of content will be displayed, within each of these different drink sections size can be changed as well to change the "code" boxes based off drink and size. Drink>Size>Code. Clicking a new drink will reset the size to "G" and the code boxes will be cleared to default. The buttons on the bottom should be different for each drink and will change the code boxes and be able to set a preferred size. The Americano section will give you the best idea of what I'm going for except I couldn't figure out how to select a prefered radio button. I just want to learn a better way to go about this problem, any references would be appreciated!
Here's a demo of what I've got.
html
<body>
<div id="container">
<div id="header">
<ul class="navigation" role="navigation">
<li id="nav-a"><a>Americano</a></li>
<li id="nav-c"><a>Cappuccino</a></li>
<!--<li id="nav-l"><a>Latte</a></li>
<li id="nav-mac"><a>Macchiato</a></li>-->
<li id="nav-m"><a>Mocha</a></li>
</ul>
</div>
<div id="main-wrap">
<div id="sidebar">
<div id="size">
<p id="size-title">Cup size</p>
<form>
<input type="radio" name="size" id="short" value="short" />
<label for="short">S</label>
<input type="radio" name="size" id="tall" value="tall" />
<label for="tall">T</label>
<input type="radio" name="size" id="grande" value="grande" checked="checked"/>
<label for="grande">G</label>
<input type="radio" name="size" id="venti" value="venti" />
<label for="venti">V</label>
</form>
</div>
<div id="cup-container">
<img src="http://tonyjt.com/wp-content/uploads/2014/12/Empty.png" class="cup">
</div>
</div>
<div id="content-wrap">
<div id="mid-wrap">
<div id="key">Key
</div>
<div id="info"> about the drink</div>
<div id="examples">
<section class="ex-btns">
<button class="btn" id="default-btn">Default</button>
<button class="btn" id="ex1-btn">Example 1</button>
<button class="btn" id="ex2-btn">Example 2</button>
</section>
</div>
</div>
<div class="code">Code
<p class="box-font">Decaf</p>
<div class="boxes" id="decaf"><p></p></div>
<p class="box-font">Shots</p>
<div class="boxes" id="shots"><p></p></div>
<p class="box-font">Syrup</p>
<div class="boxes" id="syrup"><p></p></div>
<p class="box-font">Milk</p>
<div class="boxes" id="milk"><p></p></div>
<p class="box-font">Custom</p>
<div class="boxes" id="custom"><p></p></div>
<p class="box-font">Drink</p>
<div class="boxes" id="drink"><p></p></div>
</ul>
</div>
</div>
</div>
<div id="footer"><strong>Barista Tip:</strong>
<p id="tip"></p>
</div>
</div>
</body>
css
body {
background:#eee
}
#header,#footer {
background:#006341
}
#main-wrap {
overflow:hidden;
background:#d9d9d9
}
#content-wrap {
background:#c5c5c5
}
.code {
width:80px;
height:500px;
float:right;
background:#fff
}
#key,#examples {
height:80px;
background:#000
}
#main-wrap>div {
height:500px
}
#header {
height:40px;
line-height:40px;
text-align:center;
font-size:30px
}
#footer {
height:50px
}
#container {
width:980px;
position:absolute;
margin:0 auto
}
#sidebar {
float:left;
width:300px;
background:#f0f0f0
}
#mid-wrap {
float:left;
width:600px;
height:500px;
overflow:hidden
}
#key {
width:600px;
color:#fff
}
#info {
height:340px
}
.info {
float:left
}
.boxes {
width:50px;
height:40px;
border:2px solid #000;
margin-top:4px;
margin-left:14px
}
.boxes p {
text-align:center;
margin:0;
padding-top:1px;
font:32px/40px "Shadows Into Light Two"
}
#custom {
width:60px;
margin-left:9px
}
#size {
height:115px;
top:0
}
.cup {
width:250px;
padding-top:4px
}
#cup-container {
margin:0;
padding-left:25px;
bottom:0
}
form {
position:relative;
background:#fff;
padding:10px;
display:inline-block;
margin:5px 31px;
}
input {
display:none
}
input:checked+label {
background:#000;
color:#fff
}
label {
font-family:lato;
cursor:pointer;
display:inline-block;
margin-right:2px;
width:50px;
height:40px;
text-align:center;
line-height:40px
}
label:last-child {
margin-right:0
}
label:hover {
background:#7f7f7f
}
#header,#footer,#tip {
font-family:lato;
color:#fff;
font-weight:300
}
#footer,#tip {
line-height:50px;
padding-left:15px
}
.code,#key,#size-title {
text-align:center;
font-family:lato
}
#size-title {
margin:0;
padding:5px 0
}
.box-font {
margin-bottom:5px;
margin-top:10px;
font:300 16px lato
}
#tip {
display:inline-block;
margin:0;
padding-left:5px
}
#header li {
text-align:left;
display:inline;
margin:0;
padding:2px 10px;
line-height:40px;
cursor:help
}
#header ul {
padding:0;
margin:0
}
#header ul li:hover {
background:#eee;
color:#000
}
#size li {
text-align:left;
display:inline
}
jQuery
function myFunction() {
/************************************* A ****************************/
$('#nav-a').click(function() {
$('#decaf p').html('');
$('#shots p').html('3');
$('#syrup p').html('');
$('#milk p').html('');
$('#custom p').html('');
$('#drink p').html('A');
$('#grande').attr('checked',true);
$('#info').html('Americano blaw blaw blaw');
$(".cup").attr('src',"http://tonyjt.com/wp-content/uploads/2014/12/Drink-A.png");
$('#tip').html('Put a sleeve on the cup before you add the hot water.');
/* Size ****************************/
$('#short').click(function() {
$('#shots p').html('1');
})
$('#tall').click(function() {
$('#shots p').html('2');
})
$('#grande').click(function() {
$('#shots p').html('3');
})
$('#venti').click(function() {
$('#shots p').html('4');
})
$('#default-btn').click(function() {
$('#decaf p').html('');
$('#shots p').html('');
$('#syrup p').html('');
$('#milk p').html('');
$('#custom p').html('');
$('#drink p').html('A');
$('#info').html('Standard comes with...');
})
$('#ex1-btn').click(function() {
$('#decaf p').html('X');
$('#shots p').html('');
$('#syrup p').html('2CD');
$('#milk p').html('');
$('#custom p').html('W/R');
$('#drink p').html('A');
$('#info').html('In this exapmle...1');
$('#venti').attr('checked',true);
})
$('#ex2-btn').click(function() {
$('#decaf p').html('');
$('#shots p').html('');
$('#syrup p').html('CL');
$('#milk p').html('S');
$('#custom p').html('');
$('#drink p').html('A');
$('#info').html('In this exapmle...2');
$('#tall').attr('checked',true);
})
});
/************************************* C ****************************/
$('#nav-c').click(function() {
$('#decaf p').html('');
$('#shots p').html('2');
$('#syrup p').html('');
$('#milk p').html('2%');
$('#custom p').html('');
$('#drink p').html('C');
$('#grande').attr('checked',true);
$(".cup").attr('src',"http://tonyjt.com/wp-content/uploads/2014/12/Drink-C.png");
$('#tip').html('Fill the milk pitcher to the line under the size you are making. Ex: Fill to the Tall line if you are making a Grande.');
$('#short').click(function() {
$('#shots p').html('1');
})
$('#tall').click(function() {
$('#shots p').html('1');
})
$('#grande').click(function() {
$('#shots p').html('2');
})
$('#venti').click(function() {
$('#shots p').html('2');
})
});
/************************************* M ****************************/
$('#nav-m').click(function() {
$('#decaf p').html('');
$('#shots p').html('2');
$('#syrup p').html('4M');
$('#milk p').html('2%');
$('#custom p').html('WC');
$('#drink p').html('M');
$(".cup").attr('src',"http://tonyjt.com/wp-content/uploads/2014/12/Drink-M.png");
$('#tip').html('Swirl the cup while the shots are pulling into it. This melts down the mocha to prevent it sitting at the bottom.');
$('#short').click(function() {
$('#shots p').html('1');
$('#syrup p').html('2M')
})
$('#tall').click(function() {
$('#shots p').html('1');
$('#syrup p').html('3M')
})
$('#grande').click(function() {
$('#shots p').html('2');
$('#syrup p').html('4M')
})
$('#venti').click(function() {
$('#shots p').html('2');
$('#syrup p').html('5M')
})
});
}
$(document).ready(myFunction);
1 answers
solution1
0 ACCPTED 2014-12-19 11:12:00
In terms of jQuery usage, i do not believe that you are going about it in the wrong way at all. an ideal way to do this may be through PHP, where the elements are all simply pulled from a database. But through jquery .click() or other ways of handling onclick events will be used substantially. another method could be through the use of CSS classes with .addClass() , .removeClass() and .toggleClass() . if you need to simply not display a button or to display different styles.
But i think that you are not going about this in a bad way.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Better way to generate HTML using coffeescript / jQuery than using strings?
Better way to iterate over array and append to html using js or jquery
is there a better way to make something click-able other than using <a href=“#”>element</a>
Better way than using document ready in JQuery
Change Content On Click Using Numbers?
Change (.load) HTML content when click
What is a better way to write HTML than document.write in JavaScript?
Would anyone refactor a URL change better than the way I do?
Is there a better way to append HTML using jQuery
which is better way of building html using jquery
Related Tags