0

请帮忙。我正在尝试根据 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 生成的 */

4

2 回答 2

4

我建议：

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 小提琴演示。

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

var text = opts[this.id];

这也允许您在添加新对象但对象中没有相应值（由于错字或疏忽）的情况下输入默认消息id，例如：

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

这依赖于“假”的返回值，如果没有等于 的键opts[this.id]，通常是这样，因此您可以对三元运算符更严格：undefinedid

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

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

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

此外，我更正了 HTML 以将h3元素包含在li.

参考：

于 2013-01-30T16:57:37.130 回答
0

看看这个jsFiddle。一定要检查每个部分周围的跨度的 HTML 并使用这个 jQuery：

$("#calcchooser li").click(function () {
    $("#selectedproduct").text($(this).siblings("h3").text() + " " + $(this).text());
});
于 2013-01-30T16:53:56.590 回答