Question

我正在研究一种工作工具，以帮助简化某些事情，但我从未擅长最佳实践，并希望确保我做到了这一点。

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

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

我不确定我是否可以访问MySQL数据库，而且我无法将公司信息放在我的个人沙盒网站上，所以我认为我大部分时间都在使用javascript。任何人都可以指导我朝正确的方向发展吗？

下面的代码不完整，只是想知道我在想什么。即。

//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");

〜

<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>

我是否在正确的轨道上？我是否应该将功能绑定到A列中的链接每次单击时，将Hidden类添加到B或C列的所有父容器中？或者有更优雅的方式来做到这一点？

Answer 1

您不应该使用onclick。使用addEventListener（vanilla JS）或.click()（jQuery）。

为什么呢？关注点分离。您的HTML用于内容和布局。你的CSS用于造型。你的JS是用于编写脚本的。
MySQL不是一种编程语言。这是一个数据库系统。您可以对值进行硬编码，将其存储在某个JSON文件中，也可以使用数据库和服务器端脚本语言从数据库中加载它。
尝试从布局中分离数据。例如：

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) {
         // ...
    }
}

这将是一个很好的jQuery级架构。 “最好的”架构？一个模板库（但在这个级别上没有必要）。

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

1 个答案: