如何根据复选框链接方法？答案

【问题标题】：How to chain methods according to checkboxes?如何根据复选框链接方法？
【发布时间】：2017-11-28 09:13:24
【问题描述】：

我可以将方法存储在变量中吗？那么如何使用变量作为方法呢？或者我应该更好地创建一个以选择器为参数的函数？我不想使用 eval。

编辑：我的问题是：是否可以通过方法动态构造一个链并将其应用于指定的 DOM 元素？

<input type="checkbox" name="methods" id="check0">change color
<input type="checkbox" name="methods" id="check1">change width
<div class="performedOn"></div>
<script>
var storedmethod = '';
if ($("#check0").prop("checked")==true) {
    var storedmethod = '.css({"background-color": "red"});';
    $(".performedOn")[storedmethod];
}
if ($("#check1").prop("checked")==true) {
    var storedmethod = storedmethod  + '.width(200)';
    $(".performedOn")[storedmethod];
}
</script>

【问题讨论】：

为什么要存储方法？
如果您这样做是为了更改 css（根据示例），那么您最好使用类、存储这些类并使用 addClass/removeClass。
您可以轻松地将方法存储为变量（例如function foo() { }; var bar = foo; bar(); - 但您不是在示例代码中存储方法，而是存储方法调用（带有参数），这实际上是不同。您可以存储一个匿名函数并根据需要调用它。
你能更详细地解释一下你想要实现的目标吗？
我真正想要实现的是有一个复选框列表，例如： [ ] 更改颜色 [x] 加宽 [x] 向右移动 [ ] 隐藏和一个检查哪些复选框的提交按钮检查然后我想在
上应用选定的方法在这种情况下： $(".performedOn").width(200).left(200)

标签： javascript jquery method-chaining

【解决方案1】：

$(document).ready(function(){
$('#check0').change(function(){
$('.performedOn').toggleClass('color')
})
$('#check1').change(function(){
$('.performedOn').toggleClass('width')
})
})

.performedOn{
   width:100px;
   height:100px;
   border:1px solid #000; 
}
.color{
background-color:red
}
.width{
width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="methods" id="check0">change color
<input type="checkbox" name="methods" id="check1">change width
<div class="performedOn"></div>

【讨论】：

【解决方案2】：

我可以将方法存储在变量中吗？那么如何使用变量作为方法？或者我应该更好地创建一个带有选择器的函数作为范围？我不想使用 eval

从您要达到的目标来看，您不必满足上述所有要求。只需将change 事件绑定到checkboxes

$("#check0").change(function(){
   if( $(this).prop("checked") == true ) {
       $(".performedOn").css({"background-color": "red"});
   }
})
$("#check1").change(function(){
   if( $(this).prop("checked") == true ) {
       $(".performedOn").css({"width": "200"});
   }
})

演示

$("#check0").change(function() {
  if ($(this).prop("checked") == true) {
    $(".performedOn").css({
      "background-color": "red"
    });
  }
})
$("#check1").change(function() {
  if ($(this).prop("checked") == true) {
    $(".performedOn").css({
      "width": "200"
    });
  }
})

.performedOn
{
   width:100px;
   height:100px;
   border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="methods" id="check0">change color
<input type="checkbox" name="methods" id="check1">change width
<div class="performedOn"></div>

【讨论】：