Question

我写了很多类似于以下代码的东西。它基本上根据某些条件切换元素。

在下面的组成示例中，条件为“如果选中agree复选框且name字段不为空”。

$("button").click(function() {
  if ($("#agree").is(":checked") && $("#name").val() != "" ) {
    $("#mydiv").show();
  } else {
    $("#mydiv").hide();
  }
});

我希望有某种jQuery函数可以这样工作。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

那里有类似的东西吗？或者除了第一个例子之外还有其他方法以较少的if-else-ish方式执行此操作吗？

Answer 1

好的，所以我是个白痴，在提问之前需要RTM。

jQuery.toggle()允许您开箱即用。

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

Answer 2

首先，让我们看看我是否理解你想要做的正确... 您想要查看复选框的状态（已选中或未选中），并根据该值的状态隐藏或显示第二个div。

定义此样式：

.noDisplay {
    display:none;
}

使用此JavaScript：

$("button").click(function() {
  $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});

可以在这里找到jQuery上的文档： http://api.jquery.com/toggleClass/

Answer 3

你可以自己编写这个函数。

function toggleIf(element, condition) {
    if (condition) { element.show(); }
    else { element.hide(); }
}

然后像这样使用它：

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");

Answer 4

语法 4 $(selector).toggle(display)

显示 true - 显示元素。 false - 隐藏元素。

Answer 5

如果toggle()对您不利（例如因为它动画效果），您可以编写一个小的jQuery插件，如下所示：

$.fn.toggleIf = function(showOrHide) {
  return this.each(function() {
    if (showOrHide) {
      return $(this).show();
    } else {
      return $(this).hide();
    }
  });
};

然后像这样使用它：

$(element).toggleIf(condition);

是否存在类似jQuery.toggle（boolean）的东西？

5 个答案: