Question

在此页面中：https://www.psd2html.com/order-now.html您可以选择所需的商品，价格会随您的选择而变化。它怎么能建成？

Answer 1

他们使用Mootools，一个面向对象的JavaScript框架来实现这种效果，但它也可以在vanilla JavaScript中完成（尽管我建议使用一个框架来处理跨浏览器问题，等等。似乎是jQuery）。

基本上，根据每个布局选项中选定的单选按钮，对与总价格对应的元素进行引用（<em id="amount">$[price]</em>），并根据所选的无线电设置html。

Answer 2

这只是一个普通的单选按钮列表，当单击无线电时，该值会在总成本标签中更改。您可以使用radiobutton的onclick功能来完成此操作。我建议顺便使用jquery。 Jquery是一个基于javascript构建的优秀框架。我永远不会再回到使用普通的旧javascript。

确保您在文件的 <head> 中引用jquery，如下所示：

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery

这里试试这个：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Your payment amount is : <span id="spn_Price"></span>
        </div>

            <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"/>
            <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"/>

        <script type="text/javascript">
            function DisplayPrice(price)
            {
                $('[id$=spn_Price]').html(price);
            }
        </script>
    </form>
</body>
</html>

Answer 3

可以帮助你的东西..

使用jquery：

<p>
you amount is : <span id="displayPrice"></span>
</p>

<input type="radio" value="159" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>
<input type="radio" value="259" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>

依旧......

Answer 4

如果您有“jQuery in Action”，那么您将找到确切的示例。

简而言之：价格被存储为跨度的附加属性，如下所示：

<span price="100">100$</span>

然后使用jQuery，您可以使用选择器“span [price]”创建必要的侦听器并获得价格（然后将其乘以数字并获得总价格）

Answer 5

我会推荐JQuery，因为它比我过去尝试的大多数其他JavaScript库更容易掌握。我碰巧遇到了一些JavaScript挑战，直到我拿起JQuery和你想要的效果现在很容易实现。

Answer 6

网络的美妙之处在于（几乎）UI中的所有表示和逻辑代码都是可见的！您将无法看到PHP或Rails代码，但是通过在页面标题中的链接，您可以看到css文件，外部链接的JS，以及整个文档的组合方式。

在我看来，没有比使用DOM嗅探器更好的学习方法了（现在，由我创造，我相信）。

XRay有一个书签，可让您查看页面及其CSS属性。
Web Developer Toolbar是检查我所知道的任何内容的最全面的工具。
此外，很多人都非常喜欢FireBug。最后两个仅适用于Firefox，但实际上，请查看它们并学会自行查看和激励。

你永远不会得到服务器端的东西（有充分的理由），但客户端这样的东西，比如你感兴趣的JS很容易检查。

我该如何创建这样的表单？

6 个答案: