Отображение и скрытие объектов в JQuery

Question

Я хотел бы показать и скрыть объекты (div, text или btns) в соответствии с некоторыми условиями.

В C # мы можем написать примерно так, чтобы уменьшить количество кодировок:

txtA.visible = (type == "A");
txtB.visible = (type == "B");
txtC.visible = (type == "C");

В JQuery для отображения и скрытия я использую методы .show () и .hide ().Но я должен написать много строк для этой простой функции.Например:

if (type == "A")
   $("#txtA").show();
else
   $("#txtA").hide();

if (type == "B")
   $("#txtB").show();
else
   $("#txtB").hide();

if (type == "C")
   $("#txtC").show();
else
   $("#txtC").hide();

Можно ли достичь той же функциональности с меньшим количеством линий?Спасибо.

Answer 1

.toggle(showOrHide) позволяет логическому элементу показать или скрыть элемент.

Вы можете переписать свой пример, чтобы он выглядел так:

$("#txtA").toggle(type === "A");
$("#txtB").toggle(type === "B");
$("#txtC").toggle(type === "C");

Пример для jsfiddle

Answer 2

Используйте троичный оператор:

(type == "A") ? $("#txtA").show() : $("#txtA").hide();

Answer 3

Это покажет текущий тип и скроет все элементы одного уровня (я предполагаю, что они помещены в контейнер)

// Remember ids are case sensitive
var type = 'A';

$('#txt' + type).show() // Show the current type
  .siblings().hide();  // Hide all other elements

Fiddle: http://jsfiddle.net/garreh/4JkGm/

Если ваши родственные элементы не всегда являются тем типом, который вы хотите скрыть, просто пометьте фильтр на нем:

$('#txt' + type)
  .show() // Show the current type
  .siblings()
  .filter(function() {
      return (this.id.match(/^txt[A-C]$/))
  }).hide(); // Hide all other elements

Fiddle: http://jsfiddle.net/garreh/4JkGm/1/

Answer 4

взгляните на JQuery toggle !