javascript - Ajax调用相同的id

Question

我使用 ajax 调用来完成此操作:当您单击它显示的链接时，它会在底部创建一个具有相同文本的链接。

HTML:

 <nav class="navbar">
        <ul>
            <li>
                <a id="addtable" href="#">Add+</a>
            </li>
            <li>
                <a href="#" id="table">Table1</a>
            </li>
            <li>
                <a href="#" id="table">Table2</a>
            </li>
            <li>
                <a href="#" id="table">Table4</a>
            </li>
            <li>
                <a href="#" id="trial"></a>
            </li>
        </ul>
    </nav>

JQuery:

$(document).ready(function(){
    $('#addtable').click(function(){
        $.ajax({
            type: 'GET',
            data: {loadpage: 'addtable'},
            url: 'addtable.php',
            success: function(data){    
            $('#trial').html(data);
            } 
        }); //ajax request
    }); //change function
}); //document ready

 $(document).ready(function(){
    $('#table').click(function(){
        $.ajax({
            type: 'GET',
            data: {loadpage: $(this).text()},
            url: 'addtable.php',
            success: function(data){    
            $('#trial').html(data);
            } 
        }); //ajax request
    }); //change f
});

PHP(addtable.php):

<?php
    echo $_GET['loadpage'];
?>

当我单击 addtable 时，它​​会将其显示在列表底部(这就是我想要的)，当我单击表一(它显示表一)时，它也会这样做，但是当我单击表二或表三时它没有做任何事情。我认为这与它们具有相同的 id(表)有关，我认为 jquery 使用它看到的第一个，有谁知道如何解决这个问题，以便当我单击它们时它显示表二和表三。

任何帮助将不胜感激。

Answer 1

id 在同一文档中应该是唯一的，用通用 class 替换重复的 id，例如:

<nav class="navbar">
    <ul>
        <li>
            <a id="addtable" href="#">Add+</a>
        </li>
        <li>
            <a href="#" class="table">Table1</a>
        </li>
        <li>
            <a href="#" class="table">Table2</a>
        </li>
        <li>
            <a href="#" class="table">Table4</a>
        </li>
        <li>
            <a href="#" id="trial"></a>
        </li>
    </ul>
</nav>

然后在你的js中使用点.(类选择器):

$('.table').click(function(){

希望这有帮助。