jquery - 上传文件以访问网页？我的代码不好？

Question

这个想法很简单，当您访问同一个网页时，您应该根据点击<a>元素上传不同的文件：曲目或集合。

但是我的代码不起作用，有什么想法吗？

网页中的html

<li id="sets"><a href="producciones.html" onclick="cargar('tracks.txt', '#p1')">Tracks</a></li>
<li id="sets"><a href="producciones.html" onclick="cargar('sets.txt', '#p1')">Sets</a></li>

脚本js中的JQuery+AJAX。

function cargar(arch, id){
    $.ajax({
        url:arch,
        success:function(result){
            $(id).html(result);
        }
    });
}

Answer 1

在您的代码中，当按下链接时，cargar()会执行该函数，但也会重新加载页面。尝试添加return false;以阻止在浏览器窗口中打开页面。

<li id="sets"><a href="producciones.html" onclick="return cargar('tracks.txt', '#p1');">Tracks</a></li>
<li id="sets"><a href="producciones.html" onclick="return cargar('sets.txt', '#p1');">Sets</a></li>

和：

function cargar(arch, id){
  $.ajax({url:arch,success:function(result){
    $(id).html(result);
  }});
  return false;
}

Answer 2

可能是 href 和 inline JS 之间的问题onclick。

您可以添加更多 JQuery 以避免内联脚本并执行以下操作：

<li id="sets-1" target="p1" url="tracks.txt">Tracks</li>
<li id="sets-2" target="p1" url="sets.txt">Sets</li>

$('[id^="sets-"]').each(function(){
    $(this).click(function(){
        var url = $(this).attr('url');
        var target = $(this).attr('target');
        $.ajax({
            url:url,
            success:function(result){
                $('#' + target).html(result);
            }
        });
    }); 
});