在客户端单击按钮时如何 select 不同的传单 js 文件

Question

我的 host/public/js 文件夹中有几个 js 文件。在我的 html 中，我有一个包含几个 link 的列表，代表 js 文件。

我想要实现的是，当单击 link 时（例如 <a href="">file1.js</a>），file1.js（在我的 [=22= 中的 <head> <script src="/js/file1.js" type="text/javascript"></script> </head> 中引用] 文件）应该用于显示使用传单创建的地图（交互式地图的 JavaScript 库）。

有没有办法使用 PHP、Javascript、twig 或 jquery 创建此 "javascript file selection" 工具？

Answer 1

您可能以错误的方式解决问题。

基本上，您要做的是在单击此页面上的内容时更改页面的状态。为此，您需要从服务器获取一些内容。

我认为你应该考虑一下：

您只有一个可以调用 application.js 的 javascript 文件，您可以使用脚本元素加载该文件。在此文件中，您将拥有所有 javascript 代码。

点击发生时，您的代码将执行一个异步请求以从您的服务器获取数据并相应地更改您的页面。

示例（jQuery）：

    $.ajax({
            url: url,
            jsonp: false,
            dataType: "json"
        }).done(function(data){
            processJSON(data);
        });

完整示例在这里：http://franceimage.github.io/map/

当您点击左侧边栏的第一个图标时，您可以select一组不同的点。然后它从服务器获取数据 (/map/data) 并更改地图的外观。

是你需要的吗？

Answer 2

我处理问题的方式不对。解决方案是 https://api.jquery.com/jQuery.getScript/。

我从服务器异步获取我的 js 脚本。使用 document.getElementById('id_map_container').innerHTML = "<div id='map'></div>"; 重新加载容器（渲染地图的地方）（参见 refresh leaflet map: map container is already initialized）

在上面的例子中，只有一张传单，数据（黄色点）被提取并显示在基础地图上。

就我而言，我有很多必须请求的 js 文件。所以解决方案是 jQuery.getScript( url [, success ] )，这实际上是

的简写和等价物

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

在客户端单击按钮时如何 select 不同的传单 js 文件

How to select different leaflet js files when a button is clicked on the client side

javascript

php

jquery

twig

leaflet