Question

我正在创建一个页面，根据按钮单击将变量设置为true或false。如果我为每个变量/按钮创建一个函数，这是可行的，但由于最后会有相当多的变量，我想在单个函数中执行此操作，如果可能的话：

<div>
  <button type="button" id="colorbutton" class="button red" onClick="manualSelect('Color')">Colors</button>
  <button type="button" id="animalbutton" class="button red" onClick="manualSelect('Animal')">Animals</button>
</div>

$manualColor = false;
$manualAnimal = false;    

function manualSelect(item) {
  if ($('manual' + item) == false) {
    $('manual' + item) = true;
  } else {
    $('manual' + item) = false;
  }
}

我知道这是愚蠢的，只是为了举例。

这是完整的脚本： https://jsfiddle.net/8ers54s9/5/

Answer 1

当然可以这样做：

var manual = {
  "Color": false,
  "Animal": false,
};

$("button").on("click", function() {
  var item = $(this).data("select");
  manual[item] = !manual[item];
  console.info(manual);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button type="button" id="colorbutton" class="button red"  data-select="Color">Colors</button>
    <button type="button" id="animalbutton" class="button red" data-select="Animal">Animals</button>
</div>

Answer 2

您可以通过文本访问对象的属性，例如：

flags["animal"] = true;

您也可以访问：

flags.animal = true;

所以把所有＆＃34;变量＆＃34;你想切换到另一个变量，例如：

＆＃13;

var flags = {};

function toggleFlag(item) {
  flags[item] = !flags[item];


  console.log("color: " + flags.color)
  console.log("animal: " + flags.animal)
  console.log(flags)
}

toggleFlag("test")

$(".button").click(function() {
  toggleFlag($(this).data("flag"))
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button type="button" class="button" data-flag='color'>Colors</button>
  <button type="button" class="button" data-flag='animal'>Animals</button>
</div>

＆＃13;

Answer 3

在AngularJS中

<button ng-click="manual()">Click me!</button>

$scope.manualColor = true;

$scope.manual = function () {
  $scope.manualColor = false;
}

根据参数更改boolean var onClick

3 个答案: