javascript変数をjavascript関数に渡しますか？

Question

私はメニュー内の異なるマップレイヤーをリストするマッピングアプリケーションを持っています。各レイヤーは特定のクラス名を持っています。

このクラス名は、ユーザーが名前をクリックしてレイヤーをマップに追加したりマップから削除したり、レイヤーをマップキーに追加/削除したりするときに使用されます。

これは問題なく動作していますが、マップキーから削除できるように、各レイヤー名の横に小さな十字形を含めて苦労しています。

私のコードは以下の通りです - 私は、レイヤーIDを取り、関数内でこれを使用しようとしますが、私はエラーを取得onclickの機能が含ましよう：私の変数は、現在のオブジェクトであるため

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

をください別の方法でlidを指定する必要がありますか？

が

<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を使用してレイヤーのリストのオプションを示しHTMLはここにある

それが表示されている場合に応じて、レイヤーを非表示にしたり表示するためのいずれか（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属性である：

ブラウザが表示されますどのような210

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

lidが"foo"であれば、次のようになります。

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

注それはremoveLayerが文字列"foo"、fooという変数を期待していないと呼ばれることを意味していること。

ブラウザは、idを持つすべての要素に対してグローバルを作成します。グローバルは要素オブジェクトを参照します。したがって、fooはその要素を指し、そのidは参照しません。

あなたが引用符を望んでいた：

lid.setVisible(false); 

あなたがしたい：

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

ので、ブラウザは

removeLayerの一部がオブジェクトを期待しているようだ、と述べた

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

を見て私たちがあなたを完全に助けることができるように、それについて私たちにもっと教えてください。

---

しかしではなく、引用符を追加することによって、それを修正、私は完全にonxyz属性を使用して停止します。代わりに、最新のイベント処理を使用してください。

onclick属性を削除し、代わりに：あなた蓋は、これは ".icon [Objectオブジェクト]"

に変換されます。そうです、あなたがする必要がオブジェクトである場合

$(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) 

をこれを変更してください。まさにこの行のリターンをチェックし、それに沿って取得するようにコードを変更します。

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

Answer 3

「蓋」は、あなたがこの$(".icon" + lid)ような何かを書くことができないよりもオブジェクトである場合。代わりに、あなたのようなものを使用する必要があります$(".icon" + lid.paramName)