jQuery订单表格，如何将价格输入输入字段？

【问题标题】：jQuery order form, how to get prices into input fields?jQuery订单表格，如何将价格输入输入字段？
【发布时间】：2011-08-17 08:30:18
【问题描述】：

我正在制作这个 jQuery 订单表格，但我遇到了一些挑战，因为我对 JavaScript 还很陌生。

我的目标：当有人选择辅助字段时，价格将显示在 class="item-price" 输入字段中。例如：有人点击“8x10”，然后点击“No Frame”，No Frame 的价格将显示在“item-price”字段中。

我将这些字段放在另一个字段的选定字段中。下面是我的 HTML 和 JavaScript：

<form action="" method="post" class="form" name="form">
<div class="selection">
<div class="selection-announcement">Select Your Size</div>
<div class="selection-announcement-hidden">Select Your Frame</div>
<div class="selection-announcement-hidden2">Select Your Giclee Type</div>
</div>
<div class="input" id="8x10">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="8x10" />
        <h2>8x10</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16" />
        <h2>12x16</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="16x24">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="16x24" />
        <h2>16x24</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>12x16 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="16x24-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>16x24 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="18x36-giclee">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16 Giclee" />
        <h2>18x36 Giclee</h2>
    </label>
    <div><span></span></div>
</div>

<input name="item-name" type="text" value="" class="item-name" />
<input name="item-price" type="text" value="" class="item-price" />

<input name="Next Step" type="submit" value="Next Step" class="next-step" />

<div class="clear"></div>
</form>

jQuery:

$(document).ready(function(){

    var $class = ".input"; // MAIN DIV CLASS
    var $1 = "#8x10"; // FIRST ID
    var $2 = "#12x16"; // SECOND ID
    var $3 = "#16x24"; // THIRD ID
    var $4 = "#12x16-giclee"; // 4TH ID
    var $5 = "#16x24-giclee"; // 5TH ID
    var $6 = "#18x36-giclee"; // 6TH ID

    var $heightA = "130"; //px FOR REGULAR PRINTS
    var $heightB = "110"; //px FOR GICLEE PRINTS

    var $span = "<span></span>"; // ELEMENT TO HOLD HIDDEN FORM FIELDS

    var $a1 = ".selection-announcement"; // FIRST ANNOUNCEMENT ID
    var $a2 = ".selection-announcement-hidden"; // SECOND ANNOUNCEMENT ID
    var $a3 = ".selection-announcement-hidden2"; // THIRD ANNOUNCEMENT ID

    // HIDDEN INPUT FIELDS
    var $8x10 = "<div><label><input class='test1' id='1' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($19.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='2' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($55.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='3' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16 = "<div><label><input class='unselected' id='4' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($29.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='5' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($89.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='6' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $16x24 = "<div><label><input class='unselected' id='7' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($49.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='8' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($119.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='9' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16G = "<div><label><input class='unselected' id='10' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($129.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='11' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($99.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($139.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $16x24G = "<div><label><input class='unselected' id='12' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($189.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='13' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($139.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($189.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $18x36G = "<div><label><input class='unselected' id='14' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($249.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='15' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($199.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($249.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    /* FIRST STAGE */
    $($1+' input').click(function() {$($1+' input').removeClass('unselected');$($1+' input').addClass('selected');});   
    $($2+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($1+' input').removeClass('selected');$($1+' input').addClass('unselected');});       

    $($2+' input').click(function() {$($2+' input').removeClass('unselected');$($2+' input').addClass('selected');});   
    $($1+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($2+' input').removeClass('selected');$($2+' input').addClass('unselected');});       

    $($3+' input').click(function() {$($3+' input').removeClass('unselected');$($3+' input').addClass('selected');});   
    $($1+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($3+' input').removeClass('selected');$($3+' input').addClass('unselected');});       

    $($4+' input').click(function() {$($4+' input').removeClass('unselected');$($4+' input').addClass('selected');});   
    $($1+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($4+' input').removeClass('selected');$($4+' input').addClass('unselected');});       

    $($5+' input').click(function() {$($5+' input').removeClass('unselected');$($5+' input').addClass('selected');});   
    $($1+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});   
    $($6+' input').click(function() {$($5+' input').removeClass('selected');$($5+' input').addClass('unselected');});       

    $($6+' input').click(function() {$($6+' input').removeClass('unselected');$($6+' input').addClass('selected');});   
    $($1+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($2+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($3+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($4+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});   
    $($5+' input').click(function() {$($6+' input').removeClass('selected');$($6+' input').addClass('unselected');});       

    /* SECOND STAGE */
    $($1+' input').click(function() {$($1).addClass('input-hover');$($1+' div').animate({height: $heightA},800);}); 
    $($2+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 

    $($2+' input').click(function() {$($2).addClass('input-hover');$($2+' div').animate({height: $heightA},800);}); 
    $($1+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 

    $($3+' input').click(function() {$($3).addClass('input-hover');$($3+' div').animate({height: $heightA},800);}); 
    $($1+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($3).removeClass('input-hover');$($3+' div').animate({height: 0},800);}); 

    $($4+' input').click(function() {$($4).addClass('input-hover');$($4+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($4).removeClass('input-hover');$($4+' div').animate({height: 0},800);}); 

    $($5+' input').click(function() {$($5).addClass('input-hover');$($5+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 
    $($6+' input').click(function() {$($5).removeClass('input-hover');$($5+' div').animate({height: 0},800);}); 

    $($6+' input').click(function() {$($6).addClass('input-hover');$($6+' div').animate({height: $heightB},800);}); 
    $($1+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($2+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($3+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($4+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 
    $($5+' input').click(function() {$($6).removeClass('input-hover');$($6+' div').animate({height: 0},800);}); 

    /* THIRD STAGE */
    $($1+' input').click(function() {$($1+' div span').replaceWith($8x10);})
    $($2+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($1+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($1+' div div').replaceWith($span);});

    $($2+' input').click(function() {$($2+' div span').replaceWith($12x16);})
    $($1+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($2+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($2+' div div').replaceWith($span);});

    $($3+' input').click(function() {$($3+' div span').replaceWith($16x24);})
    $($1+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($3+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($3+' div div').replaceWith($span);});

    $($4+' input').click(function() {$($4+' div span').replaceWith($12x16G);})
    $($1+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($4+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($4+' div div').replaceWith($span);});

    $($5+' input').click(function() {$($5+' div span').replaceWith($16x24G);})
    $($1+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($5+' div div').replaceWith($span);});
    $($6+' input').click(function() {$($5+' div div').replaceWith($span);});

    $($6+' input').click(function() {$($6+' div span').replaceWith($18x36G);})
    $($1+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($2+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($3+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($4+' input').click(function() {$($6+' div div').replaceWith($span);});
    $($5+' input').click(function() {$($6+' div div').replaceWith($span);});

    /* ANNOUNCEMENT CHANGE */
    $($1+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($2+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($3+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($4+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});
    $($5+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});
    $($6+' input').click(function() {$($a1).fadeOut("slow"); $($a2).fadeOut("slow"); $($a3).fadeIn("slow");});

    /* GET THE VALUES TO THE NEXT STAGE */
    $('.test1').click(function() {$('.item-price').replaceWith('<input name="item-price" type="text" value="34.90" class="item-price" />');});


});

请帮忙。如果您需要回答更多问题来帮助我解决这个问题，请告诉我。

【问题讨论】：

  • @user713052：价格是唯一显示在动态添加的 HTML 中的地方吗？有什么办法可以将它放在data-* 属性上？另外，ids 不允许以数字开头。
  • 实际的“item-price”输入字段不是动态输入的。只有辅助选择。 jQuery 是否可以在动态添加的 HTML 被添加后使用它？
  • @user713052：是的，这是可能的，但可能有更简单的方法。我想我的意思是——有没有办法让你的 HTML 中的项目与价格相关联？另外，您是否有理由不能隐藏 inputs 的子级别并只显示它们而不是将内容插入页面？

标签： jquery forms input


【解决方案1】：

我花了很长时间才明白你在做什么，我同意安德鲁的观点，有很多方法可以更容易地做到这一点。
首先，我将告诉您您遇到的问题是什么（如果我做对了），然后我将向您展示一种不同的方式来做您正在做的事情。这不是我在工作中要做的一半，但请看一下，这样你可能会注意到一些你仍然需要理解的概念变化。
别担心，我们都曾经是 js 和 jquery 的新手
1) 缺少的概念
$(document).ready(function(){ 中的大部分代码，但不是全部。当事件发生并链接到控件时，其中的一些代码会保存为“待办事项”
如果代码中不存在控件，则在加载文档并准备就绪时，将没有人与这段条件代码（也称为事件处理程序）链接
由于单击 step1 的输入后您正在替换代码部分，因此当页面加载时，处理流程第二步所需的 html 不存在，并且无法分配给事件处理程序
您应该在将其替换为页面内容后立即将单击事件处理程序附加到“无框架”按钮，但在同一函数内
我在下面添加的这段代码负责在正确的时间添加处理程序

    $(this).replaceWith(eval(replaceMeWith));
    $('.test1').click(
        function() {
            $('.item-price').val($(this).attr('totalprice'));
        }
    );

2) 代码替代
不要指望这是完全准确的......这只是一个小测试重新设计

<html>
    <head>
    <style>
        .unselected{color:red;}
        .selected{color:green;}
    </style>
        <script src="jquery-1.5.js"></script>
        <script>
$(document).ready(function(){

    var $class = ".input"; // MAIN DIV CLASS
    var $1 = "#8x10"; // FIRST ID
    var $2 = "#12x16"; // SECOND ID
    var $3 = "#16x24"; // THIRD ID
    var $4 = "#12x16-giclee"; // 4TH ID
    var $5 = "#16x24-giclee"; // 5TH ID
    var $6 = "#18x36-giclee"; // 6TH ID

    var $heightA = "130"; //px FOR REGULAR PRINTS
    var $heightB = "110"; //px FOR GICLEE PRINTS

    var $span = "<span></span>"; // ELEMENT TO HOLD HIDDEN FORM FIELDS

    var $a1 = ".selection-announcement"; // FIRST ANNOUNCEMENT ID
    var $a2 = ".selection-announcement-hidden"; // SECOND ANNOUNCEMENT ID
    var $a3 = ".selection-announcement-hidden2"; // THIRD ANNOUNCEMENT ID

    // HIDDEN INPUT FIELDS
    var $8x10 = "<div style='background-color:red'><label><input class='test1' id='1' name='selectiongroup2' type='radio' value='No Frame' totalprice='US$ 34.90' /><h2>No Frame (<span role='actualprice'>$19.95<span>)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='2' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($55.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='3' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16 = "<div><label><input class='unselected' id='4' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($29.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='5' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($89.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='6' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $16x24 = "<div><label><input class='unselected' id='7' name='selectiongroup2' type='radio' value='No Frame' /><h2>No Frame ($49.95)</h2><h3>Shipping, Handling and Insurance: $14.95</h3></label><label><input class='unselected' id='8' name='selectiongroup2' type='radio' value='Metal Frame' /><h2>Metal Frame ($119.95)</h2><h3>Shipping, Handling and Insurance: $29.95</h3></label><label><input class='unselected' id='9' name='selectiongroup2' type='radio' value='Barnwood Frame' /><h2>Barnwood Frame ($169.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div>";

    var $12x16G = "<div><label><input class='unselected' id='10' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($129.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='11' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($99.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($139.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $16x24G = "<div><label><input class='unselected' id='12' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($189.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='13' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($139.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($189.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    var $18x36G = "<div><label><input class='unselected' id='14' name='selectiongroup2' type='radio' value='Stretched Gallery-Wrapped' /><h2>2' Stretched Gallery-Wrapped ($249.95)</h2><h3>Shipping, Handling and Insurance: $39.95</h3></label><label><input class='unselected' id='15' name='selectiongroup2' type='radio' value='Watercolor' /><h2>Watercolor ($199.95)</h2></label><div><label><input name='With Barnwood Frame' type='checkbox' value='With Barnwood Frame'><h2>With Barnwood Frame ($249.95)</h2><h3>Shipping, Handling and Insurance: $49.95</h3></label></div></div>";

    /* FIRST STAGE */
    $("[role=step1]").click(
    function(){
        var activeId=$(this).attr('id');
        $("[role=step1]").each(
            function(){
                if($(this).attr("id")!=activeId){
                    $(this).removeClass('selected');
                    $(this).addClass('unselected');
                    $(this).removeClass('input-hover');//step2
                    $(this).css("display","none");//Step3
                }

            }
        );
        $(this).removeClass('unselected');
        $(this).addClass('selected');
        $(this).addClass('input-hover');
        var replaceMeWith=$(this).attr("replacemewith");
        $(this).replaceWith(eval(replaceMeWith));
        $('.test1').click(
            function() {
                $('.item-price').val($(this).attr('totalprice'));
                alert('Pick it up and spare shipping, you would pay only '+ 
                    $(this).parent().find('[role=actualprice]').text());

            }
        );

    }
    );

    /* SECOND STAGE */
    //$($1+' input').click(function() {$($1).addClass('input-hover');$($1+' div').animate({height: $heightA},800);}); 
    //$($2+' input').click(function() {$($1).removeClass('input-hover');$($1+' div').animate({height: 0},800);}); 

    //$($2+' input').click(function() {$($2).addClass('input-hover');$($2+' div').animate({height: $heightA},800);}); 
    //$($1+' input').click(function() {$($2).removeClass('input-hover');$($2+' div').animate({height: 0},800);}); 



    /* THIRD STAGE */
    //$($1+' input').click(function() {$($1+' div span').replaceWith($8x10);})
    //$($2+' input').click(function() {$($1+' div div').replaceWith($span);});

    //$($2+' input').click(function() {$($2+' div span').replaceWith($12x16);})
    //$($1+' input').click(function() {$($2+' div div').replaceWith($span);});


    /* ANNOUNCEMENT CHANGE */
    $($1+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});
    $($2+' input').click(function() {$($a1).fadeOut("slow"); $($a3).fadeOut("slow"); $($a2).fadeIn("slow");});

    /* GET THE VALUES TO THE NEXT STAGE */


});
        </script>
    </head>
    <body>
<form action="" method="post" class="form" name="form">
<div class="selection">
<div class="selection-announcement">Select Your Size</div>
<div class="selection-announcement-hidden">Select Your Frame</div>
<div class="selection-announcement-hidden2">Select Your Giclee Type</div>
</div>
<div class="input" id="8x10" role="step1" replacemewith="$8x10">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="8x10" />
        <h2>8x10</h2>
    </label>
    <div><span></span></div>
</div>

<div class="input" id="12x16" role="step1">
    <label>
        <input class="unselected" name="selectiongroup" type="radio" value="12x16" />
        <h2>12x16</h2>
    </label>
    <div><span></span></div>
</div>


<input name="item-name" type="text" value="" class="item-name" />
<input name="item-price" type="text" value="" class="item-price" />

<input name="Next Step" type="submit" value="Next Step" class="next-step" />

<div class="clear"></div>
</form>
    </body>
</html>

【讨论】：

  • 主要是我编辑更改了获取包含原始 HTML 将被替换的 html 的 var 名称的方式。我还更改了商品价格的读取方式，并显示了带有一些额外信息的警报...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-05-24
  • 2014-03-06
  • 2020-02-08
  • 2014-10-30
  • 2019-12-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode