Question

请帮忙。我正在尝试根据li的ID来显示html。我以为我知道自己在做什么，但总是有助于其他人看一下。

<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如果需要

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;
 }

/ *这个无图像的CSS按钮由CSSButtonGenerator.com * /

生成

Answer 1

我建议：

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

这个答案的关键是，实际上，使用一个对象（原则上类似于array，但使用字母数字键），其值存储的键与id的{{1}}相同。您希望用户点击的li元素。实际上，每次点击li（ id）时，它都会从数组中检索值，其值等于id，其中包含以下行：

var text = opts[this.id];

此还允许您输入默认消息，如果添加新id而对象中没有相应的值（由于拼写错误或疏忽），例如：

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

这依赖于opts[this.id]为'falsey'的返回值，如果没有等于undefined的键，则通常为id，因此您可能会更严格与三元运营商：

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

此方法还避免使用所有if评估和is()方法（这使得运行成本更低）。

此外，通过使用JavaScript对象来包含针对关联元素id的描述，避免每次使用click（）方法时重新声明相同的变量。

此外，我已更正HTML以将h3元素括在li内。

参考文献：

jQuery（jQuery API）：
- addClass()。
- fadeIn()。
- fadeOut()。
- removeClass()。
- siblings()。
- text()。

Answer 2

看看这个jsFiddle。请务必检查HTML以了解每个部分的跨度并使用此jQuery：

$("#calcchooser li").click(function () {
    $("#selectedproduct").text($(this).siblings("h3").text() + " " + $(this).text());
});

这些jQuery if语句是否正确地通过ID获取元素？

2 个答案: