Javascript 单击链接以更改显示的内容

我正在开发一个工作工具来帮助简化一些事情，但我从来都不擅长最佳实践，我想确保我做到了这一点

我希望网站加载时只显示一列。单击a列中的链接，B列将生成适当的链接。单击B列中的链接，将生成C列。单击a列中的其他链接，B列将替换为新的正确链接（如果C列已经可见，则完全删除）

我目前的想法是拥有一个聪明的div结构，这样我就可以在所有子级上使用jQuery添加或删除一个“隐藏”类。每列都是带有样式链接的浮动div。我不确定是否最干净的方法就是为每个可能的部分设置一个父级，然后用一个类为选择器标记每个可能性。这样，我就可以在父容器上使用jQuery children（）.addClass（“Hidden”）来表示我定义的每个部分，这些部分位于单击链接的部分之后

我不确定我在工作中是否可以访问MySQL数据库，我也不能将公司信息放在我的个人沙箱网站上，所以我想我大部分时间都在使用javascript。有人能给我指引正确的方向吗

下面的代码是不完整的，只是想让我知道我已经在想什么。i、 e

//This would be part of function modemBrands when Arris is passed, currently using if else statements for each option.

$('.ModemMods').children().addClass("Hidden");
$(".Arris").removeClass("Hidden");

~

我走对了吗？我是否应该让函数绑定到A列中的链接，并在每次单击时将隐藏类添加到B列或C列的所有父容器中？还是有一种更优雅的方式

您不应该使用onclick。使用

addEventListener

（vanilla JS）或

。单击（）

（jQuery）

为什么?？关注点分离。您的HTML用于内容和布局。你的CSS是用来设计样式的。你的JS是用来编写脚本的

MySQL不是一种编程语言。这是一个数据库系统。您可以在值中硬编码，将其存储在某个JSON文件中，或者使用数据库和服务器端脚本语言从数据库中加载它

尝试从布局中分离数据。例如：

var motorola={name:“motorola”，调制解调器：[“ABC123”、“BCD123”、“XYZ123”]}；
var cisco={name:“cisco”，调制解调器：[“MEOW123”，“LOL123”，“STACKOVERFLOW”]}；
var供应商=[摩托罗拉、思科]；
对于（供应商中的var i）{
$link=$（“”）.text（供应商[i].name）；
$link.attr（“数据名”，i）；
$link.click（vendorClickHandler）；
}
函数vendorClickHandler（e）{
var vendorName=$（this.attr（“数据名”）；
var vendor=vendors.filter（函数（t）{return t.name==vendorName}）[0]；//基本上，在vendors中搜索具有此名称的元素
用于（供应商调制解调器中的var i）{
// ...
}
}

---

这将是一个很好的jQuery级体系结构。“最佳”架构？模板库（但这在这个级别上不是必需的）。

谢谢，今晚我将试一试！如果我想阅读关于构建模板库的内容，那么您头顶上的任何链接都可能证明是有用的吗？我基本上是一个业余爱好者，从来不用考虑范围，也不用用我所做的一次解决一个以上的问题，所以我相信读一读这篇文章会很有用。读一读之后，JSON文件可能是我最好的选择。我还没有用过它，它似乎是我应该用很长时间的工具。

<div class="NavCon">
    <nav>
     <!-- Brand options -->
        <div class="LinkCon">
            <a href="#" onclick="modemBrands('Arris')">Arris</a>
            <a href="#" onclick="modemBrands('Motorola')">Motorola</a>
            <a href="#" onclick="modemBrands('SMC')">SMC</a>
            <a href="#" onclick="modemBrands('Ubee')">Ubee</a>
        </div>

        <div class="ModemMods">
            <div class="LinkCon Arris">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon Motorola Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon SMC Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>

            <div class="LinkCon Ubee Hidden">
                <a href="#" onclick="modemMods('DG860A')">DG860A</a>
                <a href="#" onclick="modemMods('DG1670')">DG1670</a>
            </div>
        </div>

        <div class="ModemRegion">
        </div>

    </nav>
</div>

var motorola = {name: "Motorola", modems: ["ABC123", "BCD123", "XYZ123"]};
var cisco = {name: "Cisco", modems: ["MEOW123", "LOL123", "STACKOVERFLOW"]};
var vendors = [motorola, cisco];

for (var i in vendors) {
    $link = $("<a>").text(vendors[i].name);
    $link.attr("data-name", i);
    $link.click(vendorClickHandler);
}

function vendorClickHandler(e) {
    var vendorName = $(this).attr("data-name");
    var vendor = vendors.filter(function(t) { return t.name === vendorName })[0]; // basically, search vendors for an elem with this name

    for (var i in vendor.modems) {
         // ...
    }
}