다른 앵커 태그 클릭시 새 데이터로드

Question

이 개념을 처음 접했기 때문에 실수가 있으면 신경 쓰지 마십시오. 도움이 필요해. 모든 앵커 태그는 하드 코딩되었지만 실제로는 동적으로 만들어야합니다. 앵커 태그 클릭시 데이터를 표시하려고합니다. 이 시나리오에서는 표시 할 데이터가 다릅니다. 처음에는 SmartPhone 및 태블릿과 같은 기기를 보여줍니다. 클릭하면 스마트 폰과 완전히 관련된 mac, windows, andriod 및 blackberry와 같은 OS 버전을 표시해야하는 스마트 폰 클릭시 ... 태블릿 클릭과 마찬가지로 4 가지 버전이 태블릿과 관련하여 표시됩니다. os 버전의 onclick 다시 해당 os를 기반으로 os 버전이 표시되어야합니다. 예 : 4.0 ics, 4.1 : jellybean 등. 이 OS 데이터는 Smartphone/Tablet을 선택한 경우에만 표시되어야합니다. 다음은 내가 시도한 코드입니다 ...! HTML :

<table id="layout"> 
    <tr> 
    <td> 
    <table id='download'> 
    <tr> 
    <td> 
    <div id='main'> 
    <table id='device'> 
    <tr> 
    <td> 
    <a id='mobile_select'> SmartPhone </a> 
    <div id="os_data"> 
    <a >ios</a> 
    <a >andriod</a> 
    <a >blackberry</a> 
    <a >windows</a></div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <a> Tablet</a> 
<div id="os_data"> 
    <a >ios</a> 
    <a >andriod</a> 
    <a >blackberry</a> 
    <a >windows</a></div> 
    </td> 
    </tr> 
    </table> 
    </div> 
    </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    </table> 

JQuery와 모든

for (var i = 0; i <= 50; i++) { 
     $('#device').append('<a + i + > ' + i + '</a>'); 
    } 

    addOS(); 

    function addOS() { 
      ii = 0; 

      for (i = 0; i <= 500; i++) { 
       if ((i % 10) == 0) { 
        ii++; 
       } 
       $('#device').append('<a + i + id="oos' + ii + '"> ' + i + '</a>'); 
      } 
     } 

    $('#mobile_select').click(function() { 
      var selectedDevice = $(this).val(); 
      var selectFirst = 0; 
      addCites(); 

      $("#device").each(function() { 
       if ($(this).attr('id') != selectedDevice) { 
        $(this).remove(); 
       } else { 
        if (selectFirst < 1) { 
         $(this).attr('id', selectedDevice).attr('selected', 'selected'); 
        } 
        selectFirst++; 
       } 
      }); 
      $("#device").parent().parent().show(); 


     }); 

Answer 1

첫째, 당신은 레이아웃을 위해 테이블을 사용해서는 안된다. 다음은 작업을 수행하기 위해 수행해야하는 작업입니다.

HTML : (jQuery로)

<div id="mainCategories"> 
    <a id="smartPhone" href="">SmartPhones</a> 
    <a id="tablet" href="">Tablets</a> 
</div> 
<div id="subCategories"> 
</div> 

자바 스크립트 :

$(function() { 

    var data = {}; 
    data["smartPhone"] = ["ios", "android", "windows"]; 
    data["tablet"] = ["iosTablet", "androidTabled", "windowsTablet"]; 

    $("#mainCategories a").click(function(){ 
     var clickedItem = $(this).attr('id'); 
     var operatingSystems = data[clickedItem]; 
     $("#subCategories").empty(); 
     for(ind in operatingSystems){ 
      var os = operatingSystems[ind]; 
      var anchor = $("<a>"); 
      anchor.attr('href',''); 
      anchor.attr('id', os); 
      anchor.text(os); 
      $("#subCategories").append(anchor); 
     } 
     return false; 
    }); 
}); 

CSS :

여기

a{ 
    display:block; 
} 

하는 노력 바이올린 : http://jsfiddle.net/t426J/

운영 체제 관련 데이터를 어떻게 든 JavaScript로로드했다고 가정합니다.