javascript - 如何以更高效、更有用的方式在 jQuery 中创建多个 ajax 调用

Question

我的代码中有这 3 个链接:

<ul>
<li><a id="link1" href="#">link 1</a></li>
<li><a id="link2" href="#">link 2</a></li>
<li><a id="link3" href="#">link 3</a></li>
</ul>

这就是我为每个链接编写ajax请求的方式(正如您所看到的，每个链接相同的代码有3次 - 我想知道如何避免这种情况)

$(document).ready(function () {
    $("a#link1").click(function() {
        $.get("anothertest.php?q=1", function(data){
            $("#phpTestAlon").html(data);
        });
    });
    $("a#link2").click(function() {
        $.get("anothertest.php?q=2", function(data){
            $("#phpTestAlon").html(data);
        });
    });
    });
    $("a#link3").click(function() {
        $.get("anothertest.php?q=3", function(data){
            $("#phpTestAlon").html(data);
        });
    });
});

如何创建此代码而不需要多次重复以使其更高效？有没有办法这样写？:

$.get("anothertest.php?q="+ theIDofTheElement, 函数(数据){

谢谢， 阿隆

Answer 1

添加data-id属性到你的链接并使用一段JS:

<ul>
    <li><a id="link1" href="#" data-id="1">link 1</a></li>
    <li><a id="link2" href="#" data-id="2">link 2</a></li>
    <li><a id="link3" href="#" data-id="3">link 3</a></li>
</ul>

---

$("ul li a").click(function() {
    var idToSend = $(this).data('id');

    $.get("anothertest.php?q=" + idToSend, function(data){
        $("#phpTestAlon").html(data);
    });
});

此示例使用 data-id ，但您可以使用任何您想要的属性，包括 id="" 。另一个明智的选择是 rel="" .

请注意，选择器已更改为 ul li a从而捕获所有<a>一次事件中的点击次数。