Javascript 定制虚拟吉他的Web应用程序

我是一名设计师，正在学习更多的编码方面的知识。所以如何编写一个允许用户定制和订购吉他的web应用程序？我正在寻找一个快速概述，这样我就可以专注于学习和编码特定的步骤

我的做法是：

为每组选项创建HTML单选按钮，如身体形状、颜色、木材类型等

使用Javascript逻辑，如：如果单击此收音机，则类别中的所有其他项都为false，并显示相应的.png图像

有一个提交按钮，并使用PHP将其放入数据库或以电子邮件的形式发送数据

这是我目前的项目。我已经准备好了图形，它们很好地相互叠加在一起

---

我非常感谢增加或改变我的方法的一部分。我正在寻求更多关于下一步要学习什么的清晰信息。此web应用程序当前编码为0%。

我认为您的思路是正确的。您可能需要为吉他设置一个数据结构

var guitar = {
    'colour' : 'green',
    'model' : 'gibson'
    'make' : 'example'
};

然后，您可以在编辑页面上为每个元素设置一个下拉列表

更改任何下拉列表时，使用每个数据的值更新图像

当用户提交时，整理所有数据并传递给PHP，以使用相同的数据格式创建订单

JSON非常有用，因为Javascript和PHP都有将JSON数据编码到数组或从数组解码JSON数据的方法

更新功能示例：

function UpdateImage()
{
    colour = document.getElementById("gColour").value;
    document.getElementById("IMG-Colour").value = colour;

    model = document.getElementById("gModel").value;
    document.getElementById("IMG-Model").value = model;

    make = document.getElementById("gMake").value;
    document.getElementById("IMG-Make").value = make;
}

function SubmitOrderToPHP()
{
     colour = document.getElementById("gColour").value;
     model = document.getElementById("gModel").value;
     make = document.getElementById("gMake").value;

    url = 'order-submit.php?colour=' + colour + '&model=' + model + '&make=' + make;

    window.location = url;
}

提交功能示例：

function UpdateImage()
{
    colour = document.getElementById("gColour").value;
    document.getElementById("IMG-Colour").value = colour;

    model = document.getElementById("gModel").value;
    document.getElementById("IMG-Model").value = model;

    make = document.getElementById("gMake").value;
    document.getElementById("IMG-Make").value = make;
}

function SubmitOrderToPHP()
{
     colour = document.getElementById("gColour").value;
     model = document.getElementById("gModel").value;
     make = document.getElementById("gMake").value;

    url = 'order-submit.php?colour=' + colour + '&model=' + model + '&make=' + make;

    window.location = url;
}

---

我不明白。问题是什么？你似乎已经把一切都弄明白了。你来对了地方寻求建议，但由于你的问题目前措辞过于宽泛。堆栈溢出倾向于回答明确的问题。为了让你的问题更容易回答，也许你可以列出你的方法的一些可能的缺点，并询问这些是否适用。你可以比较两种方法做一个步骤，并问哪一个更好。好吧，不是更好，也许问哪个更有效，或者更常见，等等。你不一定有一个糟糕的问题，你只是到目前为止没有一个合格的问题。很明显，你已经把思想和工作放在了这篇文章中，你肯定会问一些关于你目前工作和未来工作的好问题，您只需要在帖子中更清楚地说明这些内容。@SverriM.Olsen我认为缺少的是代码（未编写）。尽管这是一个很好的问题，但从目前的情况来看，它与Stackoverflow无关，如果您将其转发到一个姐妹网站上，可能会更合适。谢谢您的提示，非常感谢！没问题。祝你的项目好运！