0

У меня есть приложение сопоставления, в котором перечислены различные слои карты в меню, причем каждый слой имеет определенное имя класса.Передача переменной javascript функции javascript?

Это имя класса используется, когда пользователь нажимает на имя, чтобы слой можно было добавить или удалить с карты, а также добавить или удалить слой из ключа карты.

Это работает нормально, но я борюсь с включением небольшого креста рядом с именем каждого слоя, чтобы пользователь мог удалить их из ключа карты.

Мой код ниже - я пытаюсь включить функцию OnClick, которая принимает идентификатор слоя и пытается использовать это в функции, но я получаю сообщение об ошибке:

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

Поскольку моя переменная теперь объект делать Мне нужно указать lid по-другому?

HTML, здесь, который показывает вариант списка для слоя, который использует идентификатор класса:

<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 ниже показывает, что происходит, когда пользователь нажимает на список, он принимает идентификатор, а затем использует это, чтобы получить имя слоя (который совпадает с идентификатором), чтобы скрыть или показать слой в зависимости от того, если она видна:

//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(); 
} 
+0

Можете ли вы привести пример кода HTML, пожалуйста? –

+1

Крышка - это объект, который принуждается к строке, следовательно, [объект объекта], вы можете рассказать больше о крышке? –

+0

удалить слой ожидает объект 'layer', и вы передаете ему строку - это явно не сработает :) – Maverick

ответ

4

проблема заключается в вашей onclick атрибута:

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

Что браузер будет видеть, если lid является "foo", будет:

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

Обратите внимание, что это означает, что removeLayer будет называться ожидает переменная foo, а не строки"foo".

Браузеры создают глобальные переменные для всех элементов, имеющих id; глобальный относится к элементу-элементу. Таким образом, foo будет ссылаться на элемент, а не на его id.

Вы хотели цитаты:

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

поэтому браузер видит

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

Сказав, что одна часть removeLayer кажется ожидать объект:

lid.setVisible(false); 

Вы хотите должны рассказать нам больше об этом, чтобы мы могли полностью помочь вам.


Но, а не исправить ее, добавляя кавычки, я бы прекратить использовать 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(); 
}); 
+0

Поскольку мне нужен как объект (чтобы установить видимость слоя моего слоя), так и строку (чтобы удалить запись из моего ключа), возможно, мне нужно проанализировать две отдельные переменные в моей функции onclick, поэтому я могу использовать как объект, так и строка? – Chris

+0

Благодарим за помощь! Я включил две отдельные переменные для обслуживания как объекта, так и строки. – Chris

0
$(".icon" + lid) 

Если крышка является объектом этого будет преобразован в ".Icon [объект Object]"

Так что да, вы должны измените это. Просто проверьте, что эта строка возврата и изменить свой код, чтобы получить вместе с ним:

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

Если «крышка» является объектом, чем вы не можете написать что-то вроде этого $(".icon" + lid). Вместо этого вы должны использовать что-то вроде $(".icon" + lid.paramName)

Смежные вопросы