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使用它看到的第一个，有没有人知道如何解决它，以便当我点击它时它显示表2和3。

任何帮助将不胜感激。

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(){

希望这有帮助。

Answer 2

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

$("[data-id='table']").click(function(){...})

数据ID或类

Ajax调用相同的id

2 个答案: