Question

大多数在线AJAX教程都展示了如何通过单击一个元素来获取1个文件，例如：

HTML

<a class="ajaxLoader">Get file</a>

的jQuery

$(document).ready(function () {
$(".ajaxLoader").click(function (event) {
         event.preventDefault();
   $.ajax({
 url:"ajaxfiles/file1.html", 
 cache: false,
 success:function(result){
      $("#someDiv").html(result);
    }});
    });
});

哪个工作正常。但我希望有100个这样的锚点（跨不同的页面），每个锚点都会加载不同的文件。这有实际的解决方案吗？我当然不想要的是：

<a id="id1">Get file </a>
<a id="id2">Get file</a>
<a id="id3">Get file</a>

...等并继续使用

更新我的JS文件

$('id1').click(function()( // load file 1 with ajax )); 
$('id2').click(function()( // load file 2 with ajax ));
$('id3').click(function()( // load file 3 with ajax ));

等...

我很乐意为元素提供单独的ID /属性/标题/任何内容，但有没有办法将其与正确的文件相匹配，并避免编写100个.click（）函数？

谢谢。

Answer 1

但是，您希望识别您的文件完全取决于您。在这种情况下，我们假设每个文件都是file1，file2，file3等等。我们还假设您实际使用id1，{ {1}} id3`，其中此字符串中的整数实际上是与您的文件命名法对应的整数。

id2,

现在只需将<a id="id1" class="ajaxLoader">Get file </a> <a id="id2" class="ajaxLoader">Get file</a> <a id="id3" class="ajaxLoader">Get file</a>属性拆分为id，然后将数组中的id作为2nd element的所有内容，所以在这种情况下，{{1} }，after id，1等等。然后只需将其连接到您的网址路径中即可。

Answer 2

是的，有。鉴于此HTML：

<a class="get-file-link" id="id1">Get file </a>
<a class="get-file-link" id="id2">Get file</a>
<a class="get-file-link" id="id3">Get file</a>

您可以基于该类绑定单击处理程序，然后在单击事件处理程序中获取id属性，如下所示：

$('.get-file-link').on('click' function (evt) {
    var linkId = $(this).prop('id');
    // linkId now has the id property of whichever link was actually clicked.
    // Use that to construct the name of the file to download.
    evt.preventDefault();

});

或者，您可以使用HTML5数据属性将文件名与HTML中的链接相关联。例如：

<a class="get-file-link" data-filename="file1.html">Get file </a>
<a class="get-file-link" data-filename="file2.html">Get file</a>
...
<a class="get-file-link" data-filename="fileN.html">Get file</a>

然后使用.data方法而不是.prop方法来获取文件名，如下所示：

$('.get-file-link').on('click' function (evt) {
    var filename = $(this).data('filename');
    var url = "ajaxfiles/" + filename;
    // Make the ajax call to get url
    evt.preventDefault(); 
});

使用基于ID，属性或其他的AJAX加载特定文件

2 个答案: