Question

我有这行代码。这有可能在一行中简化吗？

像这样：

toggleWithVisibility（bridge，$（＆＃39; #bridge＆＃39;）; road，$（＆＃39;＃road＆＃39;）; rail，（＆＃39; #trail＆＃39;）;. ..）;

    function toggleWithVisibility(source, target) {
        source.on('change:visible', function(){
            if (source.getVisible() == true) {
                target.show();                        
            } else {
                target.hide();
            }
        });
    }

    toggleWithVisibility(bridge, $('#bridge'));
    toggleWithVisibility(road, $('#road'));
    toggleWithVisibility(rail, $('#rail'));
    toggleWithVisibility(contour, $('#contour'));
    toggleWithVisibility(waterL, $('#rivers'));
    toggleWithVisibility(dividerP, $('#divider'));
    toggleWithVisibility(building, $('#building'));
    toggleWithVisibility(vegePoly, $('#vegetation'));
    toggleWithVisibility(waterP, $('#waterbodies'));
    toggleWithVisibility(slope50, $('#slope'));
    toggleWithVisibility(dem50, $('#dem'));

Answer 1

只需将所有键和 ID 放入数组，然后在循环中调用函数，如下所示

 $(function(){
var ar = [
{key:'key1',id:'id1'},
{key:'key2',id:'id2'},
{key:'key3',id:'id3'},
{key:'key4',id:'id4'},
];
$.each( ar, function( key, value ) {
  test(value.key,$('#'+value.id));
});
});
function test(key,ele){
console.log(key);
console.log(ele);
}

Answer 2

将所有内容放入数组中并使用.forEach循环遍历它。

[
    [bridge, $("#bridge")],
    [road, $('#road')],
    [rail, $('#rail')],
    ...
].forEach(el => toggleWithVisibility.apply(null, el)));

Answer 3

不，这不能成为一行。您可以通过Object将所有数据传递给函数。然后，该函数可以应用每个对象的绑定。

我必须假设bridge是在其他地方分配的变量或元素。例如，如果是<input type="checkbox" id="bridge-check" />，您可以使用类似的内容：

$("input[type='checkbox']").filter(":visible").on("change", function(e) {
  var source = $(this);
  var target = $("#" + source.data("target"));
  if (source.getVisible()) {
    target.show();
  } else {
    target.hide();
  }
});

现在这需要进行少量更改，并添加data属性。所以你想要的东西是：

<input type="checkbox" id="bridge-chkbx" data-target="bridge" /><label for "bridge-chkbx">Use Bridge</label>

希望有所帮助。

在Jquery中简化一行代码

3 个答案: