從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

觀察：

• 你$('#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>