将 javascript 变量传递给 javascript 函数？

Question

我有一个地图应用程序，它在菜单中列出了不同的地图图层，每个图层都有一个特定的 class 名称。

这个 class 名称在用户单击名称时使用，以便可以将图层添加到地图或从地图中删除，也可以从地图键添加/删除图层。

这工作正常，但我正在努力在每个图层名称旁边添加一个小十字，以便用户可以将它们从地图键中删除。

我的代码如下 - 我尝试包含一个 onclick 函数，该函数获取层 ID 并尝试在函数中使用它，但我收到错误消息：

Uncaught Error: Syntax error, unrecognized expression: .icon[object Object]

因为我的变量现在是一个对象，我需要以不同的方式指定 lid 吗？

此处的 html 显示了使用 class id 的层的列表选项：

<li class='last layerlist' id='layer63'><a href='#'><i class="fa fa-circle fa-lg iconlayer63"></i><span> Flood Zone 2</span></a></li>

下面的Javascript显示了当用户点击列表时会发生什么，它获取id，然后使用它来获取图层名称（与id相同）以隐藏或隐藏根据图层是否可见显示图层：

//Change layer visibility and add / remove from map key
$(".layerlist").click(function() {
    var lid = $(this).attr('id');
    map.getLayers().forEach(function(layer) {
        if (layer.get('name') == lid) {
            var visibility = layer.getVisible();
            if (visibility == false) {
                layer.setVisible(true);
                $(".icon" + lid).removeClass("fa-circle").addClass("fa-check-circle");
                $("#map-content").append("<p id='" + lid + "key'><a href='#'><i class='fa fa-times-circle' onclick='removeLayer(" + lid + ");'></i></a><img src='img/legend/" + lid + ".png' alt='Layer image'/> " + layer.get('label') + "</p>");
            }
            if (visibility == true) {
                layer.setVisible(false);
                $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
                $("#" + lid + "key").remove();
            }
        }
    });
});

//Remove selected layer from map key
function removeLayer(lid) {
    lid.setVisible(false);
    $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
    $("#" + lid + "key").remove();
}

Answer 1

问题出在您的 onclick 属性中：

"... onclick='removeLayer(" + lid + ");' ..."

浏览器将看到的内容，如果 lid 是 "foo"，将是：

... onclick='removeLayer(foo);' ...

请注意，这意味着 removeLayer 将被调用，期待一个名为 foo 的变量，而不是 string "foo".

浏览器为所有具有 id 的元素创建全局变量；全局指的是元素对象。所以 foo 将引用元素，而不是它的 id.

你想要引号：

"... onclick='removeLayer(\"" + lid + "\");' ..."

所以浏览器会看到

... onclick='removeLayer("foo");' ...

话虽如此，removeLayer的一部分似乎期待一个对象：

lid.setVisible(false);

您必须告诉我们更多相关信息，我们才能全力帮助您。

But，而不是通过添加引号来修复它，我会完全停止使用 onxyz 属性。相反，请使用现代事件处理。

删除 onclick 属性，改为：

$(document.body).on("click", "selector-for-all-lids", function() {
    // We need to know more to help with this line: lid.setVisible(false);
    var lid = this.id;
    $(".icon" + lid).removeClass("fa-check-circle").addClass("fa-circle");
    $("#" + lid + "key").remove();
});

Answer 2

$(".icon" + lid)

如果你的盖子是一个对象，这将被转换为“.icon[Object object]”

所以是的，你必须改变这一点。只需检查这一行 return 并更改您的代码以适应它：

 var lid = $(this).attr('id');

Answer 3

如果 "lid" 是一个对象，那么你不能写这样的东西 $(".icon" + lid)。相反，您应该使用 $(".icon" + lid.paramName)

将 javascript 变量传递给 javascript 函数？

Passing a javascript variable to a javascript function?

javascript

variables

constructor

function

javascript-objects