我使用 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 使用它看到的第一个,有谁知道如何解决这个问题,以便当我单击它们时它显示表二和表三。
任何帮助将不胜感激。
最佳答案
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(){
希望这有帮助。
关于javascript - Ajax调用相同的id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35367429/