点击链接来改变显示的内容

Question

General Layout

我正在努力工作，以帮助简化一些东西的工具，但我从来没有去过擅长最佳做法，并希望确保我没这个权利。

我希望网站加载只有列A可见。点击列A中的链接，列B使用适当的链接生成。单击列B中的链接，生成C列。单击列A中的不同链接，将列B替换为新的正确链接（如果列C已经可见，请将其完全清除）。

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

我不确定我有权访问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

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

   为什么？关注点分离。您的HTML用于内容和布局。你的CSS是用于造型的。你的JS用于脚本。

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

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

。

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级架构。 “最好”的架构？模板库（但这不是必需的）。