jsonデータを含むリンクからdivを開く/閉じる

Question

jsonファイルから情報を取得し、リンクとして表示します。リンクをクリックするとdivを表示して表示することができます。

ここに私のコードです。

$(document).ready(function() { 
 

 
    $.getJSON('example.json', function(data) { 
 
     var link = ''; 
 
     $.each(data.example, function(key, value) { 
 

 
      \t link += "<li><a href='" +('#newuser')+ "'>"+ value.name +"</a></li>"; 
 

 
     $('#user').append(output); 
 
    });

$("a href").click(function(){ 
 
     $(".main").hide(); 
 
     $(".main2").show(); 
 
    }); 
 
});

Answer 1

観察：

• あなたは 未知の出力VARを参照しているとして、あなたの$('#user').append(output);が廃止されましたiable。

• ('#newuser')は同じIDを持つ新しいリンクのみを作成します。 のように表示されます。必要な場合は、一意のIDが必要です。

• a hrefの代わりに、clikイベントをクラス/ IDにバインドすると、コードがきれいになります。

• 最初のリンクをクリックしてスニペットから作業してください。

var testFunc = function() { 
 
    $.getJSON('https://jsonplaceholder.typicode.com/users', function(data) { 
 
    var html = ""; 
 
    $.each(data, function(key, val) { 
 
     html += "<li><a href= '#' class= 'linkClicked'>" + val.username + "</li>"; 
 
    }); 
 
    $('#user').append(html); 
 
    $(".linkClicked").click(function() { 
 
     $(".main").hide(); 
 
     $(".main2").show(); 
 
    }); 
 
    }); 
 
} 
 

 
testFunc();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="user"> 
 

 
    </ul> 
 
    <div class="main">This is the content to be hidden</div> 
 
    <div class="main2">This is the content to be shown</div> 
 
</div>