Существует ли что-то вроде jQuery.toggle(boolean)?

Я пишу что-то похожее на следующий код много. Он в основном переключает элемент на основе некоторого условия.

В следующем подготовленном примере условие: "Если флажок 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?

Ответы

Ответ 1

Хорошо, поэтому я идиот и нуждаюсь в RTM, прежде чем задавать вопросы.

jQuery.toggle() позволяет сделать это из коробки.

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

Ответ 2

Сначала давайте посмотрим, понимаю ли я, что вы хотите сделать правильно... Вы хотите посмотреть состояние флажка (отмечено или нет) и скрыть или показать второй div на основе состояния этого значения.

Определите этот стиль:

.noDisplay {
    display:none;
}

Используйте этот JavaScript:

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

Документацию jQuery можно найти здесь: http://api.jquery.com/toggleClass/

Ответ 3

Вы можете написать функцию самостоятельно.

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

Затем используйте его следующим образом:

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

Ответ 4

Если toggle() не подходит для вас (например, потому что он анимируется), вы можете написать небольшой плагин jQuery, например:

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

а затем используйте его следующим образом:

$(element).toggleIf(condition);