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 フィドルのデモ。

この答えの鍵は、実際には、ユーザーにクリックさせたい要素のarrayと同じキーで格納された値を持つオブジェクト (原理的には に似ていますが、英数字キーを使用) を使用することです。( を持つ) がクリックされるたびに、次の行と同じキーを持つ配列から値が取得されます。idliliidid

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 オブジェクトを使用して関連要素に対する説明を含めることで、click() メソッドが使用されるたびidに同じ変数を再宣言する必要がなくなります。

h3さらに、要素を で囲むように HTML を修正しました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 に答える