Javascript Ajax调用相同的id

我使用一个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>

$(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
    echo $_GET['loadpage'];
?>

PHP（addtable.PHP）：

 <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>

$(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
    echo $_GET['loadpage'];
?>

当我点击addtable时，它会显示在列表的底部（这就是我想要的），当我点击表1时，它也会这样做（它会显示表1），但是当我点击表2或表3时，它不会做任何事情。我认为这与它们具有相同的id（即表）有关，我认为jquery使用它看到的第一个id，有人知道如何解决这个问题吗，以便在我单击它们时显示表2和表3

---

如有任何帮助，将不胜感激。

id

在同一文档中应是唯一的，用常规

类

替换重复的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>

---

希望这有帮助。

id

在同一文档中应该是唯一的，用general

类替换重复的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>

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

希望这有帮助

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

数据id或类

数据id或类id在页面上应该是唯一的，如果希望所有表共享相同的单击操作，请使用类或数据属性：id不仅应该是唯一的，而且必须是唯一的。浏览器会接受它，因为它们很好，但任何时候你重新声明一个ID，它都会覆盖对该ID的引用。就像你应用一个CSS样式，然后在文件中覆盖它一样。最后一个将胜出。ID在页面上应该是唯一的，如果希望所有表共享相同的单击操作，请使用类或数据属性：ID不仅应该是唯一的，而且必须是唯一的。浏览器会接受它，因为它们很好，但任何时候你重新声明一个ID，它都会覆盖对该ID的引用。就像你应用一个CSS样式，然后在文件中覆盖它一样。最后一个会赢。