Открытие и закрытие div от ссылки с данными json

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

Наблюдения:

• Ваш $('#user').append(output); устарела, так как вы имеете в виду неизвестный выход вар iable.

• Ваш ('#newuser') будет создавать только новые ссылки с тем же идентификатором. выглядит как, вы можете захотеть иметь уникальный идентификатор, если он вам нужен.

• Вместо a href, если вы можете связать событие clik с классом/идентификатором, это сделает ваш код более чистым.

• Нажмите на первую ссылку, чтобы увидеть ее в рабочем фрагменте.

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>