Question

Please help. I’m trying to get html to show up depending on the ID of the li. I thought I knew what I was doing, but it always helps for someone else to look at it.

<div id="calcchooser">
<ul>
<h3>Black and White</h3>
    <li id="bwsoftcover" class="calcbutton s">Paperback</li>
    <li id="bwhardcover" class="calcbutton">Hardcover</li><br><br>
<h3>Standard Color</h3>
    <li id="standardpaperback" class="calcbutton">Paperback</li>
    <li id="standardhardcover" class="calcbutton">Hardcover</li><br><br>
<h3>Premium Color</h3>
    <li id="premiumpaperback" class="calcbutton">Paperback</li>
    <li id="premiumhardcover" class="calcbutton">Hardcover</li><br><br>
<h3>Ebook</h3>
<li id="ebook" class="calcbutton">Ebook</li><br><br>
<h3>Selected Product: <span id="selectedproduct">Black and White Paperback</span></h3>    

$("#calcchooser li").click(function () {

var bwsoftcover = "Black and White Softcover"
var bwhardcover = "Black and White Hardcover"
var standardsoftcover = "Standard Color Softcover"
var standardhardcover = "Standard Color Hardcover"
var premiumsoftcover = "Premium Color Softcover"
var premiumhardcover = "Premium Color Hardcover"
var ebook = "Ebook"

$("#percentchooser li").removeClass("s");
$(this).addClass("s");

if( $(this).is('#bwsoftcover'); )    
    {$("#selectedproduct").hide().html(bwsoftcover).fadeIn();}
if( $(this).is('#bwhardcover'); )    
    {$("#selectedproduct").hide().html(bwhardcover).fadeIn();}
if( $(this).is('#standardsoftcover'); )    
    {$("#selectedproduct").hide().html(standardsoftcover).fadeIn();}
if( $(this).is('#standardhardcover'); )    
    {$("#selectedproduct").hide().html(standardhardcover).fadeIn();}
if( $(this).is('#premiumsoftcover'); )    
    {$("#selectedproduct").hide().html(premiumsoftcover).fadeIn();}
if( $(this).is('#bwhardcover'); )    
    {$("#premiumhardcover").hide().html(premiumhardcover).fadeIn();}
if( $(this).is('#ebook'); )    
    {$("#selectedproduct").hide().html(ebook).fadeIn();}


});

CSS if desired

li {
display:inline-block;
list-style:none;
margin-right:5px;
position:relative;
cursor:pointer;
}

#calcchooser h3 {
font-weight:bold;
font-size:24px;
}

.calcbutton {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
background-color:#63b8ee;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3866a3;
display:inline-block;
color:#14396a;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:3px 7px;
text-decoration:none;
text-shadow:1px 1px 0px #7cacde;
}.calcbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
background-color:#468ccf;
}.calcbutton:active {
position:relative;
top:1px;
 }

/* This imageless css button was generated by CSSButtonGenerator.com */

Answer 1

I’d suggest:

var opts = {
    bwsoftcover: 'black and white paperback',
    bwhardcover: 'black and white hardcover',
    standardpaperback: 'standard color softcover',
    standardhardcover: 'standard color hardcover',
    premiumpaperback: 'premium color softcover',
    premiumhardcover: 'premium color hardtcover',
    ebook: 'ebook'
};

$('#calcchooser li[id]').click(function () {
    $(this).addClass('s').siblings().removeClass('s');
    var text = opts[this.id];
    $('#selectedproduct').fadeOut(300, function () {
        $(this).text(text).fadeIn(300);
    });

});

JS Fiddle demo.

The key to this answer is, really, using an object (similar in principle to an array, but with alphanumeric keys), with values stored with keys that are the same as the id of the li elements you want your users to click. Effectively each time an li (that has an id) is clicked it retrieves the value from the array with the key equal to that id with the following line:

var text = opts[this.id];

This also allows you to enter a default message in the event that a new id is added without a corresponding value in the object (due to a typo or oversight), for example:

var text = opts[this.id] || 'Default message here';

This relies on the returned value from the opts[this.id] being ‘falsey’, it would normally be undefined if there was no key equal to the id, so you could be more strict with a ternary operator:

var text = opts[this.id] !== undefined ? opts[this.id] : 'Default message here';

This approach also avoids the use of all the if assessments and the is() method (which makes it considerably cheaper to run).

And, further, by using a JavaScript object to contain the descriptions against the relevent element id avoids redeclaring the same variables every time the click() method is used.

Further, I’ve corrected the HTML to enclose the h3 elements within an li.

References:

• jQuery (at the jQuery API):
  • addClass().
  • fadeIn().
  • fadeOut().
  • removeClass().
  • siblings().
  • text().