Question

我正在试图找出为什么当我勾选复选框时，警报框和控制台日志无法正常工作。

HTML：

<div>
<input type="checkbox" id="1"/>
<label for="1">One</label>
</div>

<div>
<input type="checkbox" id="2"/>
<label for="2">Two</label>
</div>

<div>
<input type="checkbox" id="3"/>
<label for="3">Three</label>
</div>

JAVASCRIPT：

var featureLayer = L.mapbox.featureLayer()
    .loadURL('/URL/path/to/geojson/data/')
    .addTo(map)
    .setFilter(showIfChecked);

$("input[type='checkbox']").click(function() {
  showIfChecked();
});

function showIfChecked(feature) {

var parameter_codes = [1,2,3,4,5];

for (var i = 0; i < parameter_codes.length; i++) {

    if ($("#"+parameter_codes[i]).prop("checked")) {
      console.log(this); //shouldn't this return something like "#2" if the second checkbox is checked?
      return (feature.properties["property"] === parameter_codes[i]);
    } else {
      return false;
    }

}
}

Answer 1

以下是我的代码版本：http://jsfiddle.net/4b84f/10/

我传递了对点击showIfChecked方法的复选框的引用。

$("input[type='checkbox']").click(function() {
  showIfChecked();
});

到

$("input[type='checkbox']").click(function() {
  showIfChecked(this); // this refers to the checkbox element clicked
});

然后，我只使用传入的feature / checkbox作为jQuery对象来获取id属性

alert($(feature).attr('id'));

Answer 2

两个问题：首先，一旦项目不匹配，您就会退出循环。因此，如果选中了#2，则会检查#1，看到未经过检查，并立即返回false。

相反，只有在检查完所有选项后才会返回：

for (var i = 0; i < parameter_codes.length; i++) { if ($("#"+parameter_codes[i]).prop("checked")) { console.log(this); //shouldn't this return something like "#2" if the second checkbox is checked? return (feature.properties["property"] === parameter_codes[i]); } } return false;

对于console.log()，不，您调用了全局函数（showIfChecked()），因此this为window。如果要记录所选项目，则：

console.log($("#' + parameter_codes[i]));

按原样，由于您正在查看feature参数，此代码仍然会爆炸，但您未在调用中传递该参数。

showIfChecked(); // ... function showIfChecked(feature) { // ... return (feature.properties["property"] === parameter_codes[i]);

Answer 3

你想要达到什么目的？你的代码看起来有点复杂。

如果您只需要使用来自给定元素的数据调用函数，则可以直接将其传递给showIfChecked。

function showIfChecked(id) {
  console.log(id);
}

$("input[type='checkbox']").click(function(event) {
  if ($(event.currentTarget).prop("checked")) {
    showIfChecked((event.currentTarget.id));
  }
});

Javascript函数：复选框在选中时不会发出警报

3 个答案: