點擊鏈接來改變顯示的內容

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級架構。 「最好」的架構？模板庫（但這不是必需的）。