Как я могу скрыть группы элементов управления с помощью jQuery?

В моем проекте Sharepoint/веб-части/веб-странице я динамически создаю элементы/элементы управления страницы с помощью C# в файле *.ascx.cs.

В файле *.ascx я использую jQuery для реагирования на события, которые происходят на странице (выборы, изменения состояний флажков и т. д.).

Мне нужно условно скрыть группы элементов управления/элементов на странице. В частности, если пользователь устанавливает определенный флажок, я могу «удалить» целые участки страницы, которые в этом сценарии к нему не относятся.

Как я могу это сделать? У меня есть эта отправная точка:

/* If the select "Yes" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
    var ckd = this.checked;
    if (ckd) {
        // what now?
    }
});

Я мог бы сделать это методом выдергивания волос (что было бы очень болезненно для меня, потому что у меня почти столько же волос, сколько у Авессалома) и установить каждый отдельный элемент следующим образом:

if (ckd) {
    var $this = $('[id$=txtbxthis]');
    var $that = $('[id$=txtbxthat]');
    var $theother = $('[id$=txtbxtheother]');
    . . . // store a reference to all the other to-be-affected elements in vars
    $this.visible = false; // <= this is pseudoscript; I don't know what the jQuery to invisiblize an element is
    $that.visible = false; // " "
    $theother.visible = false; // " " 
    . . . // invisiblize all the other to-be-affected elements 
}

Конечно, есть более элегантный/лучший способ!

Это вопрос присвоения всем условно-невидимым элементам определенного класса, а затем невидимости каждого элемента, которому присвоен этот класс, или что?

Кроме того, я хочу, чтобы область, ранее использовавшаяся этой теперь невидимой полосой, «ушла» или «свернулась», а не осталась с пустым взглядом, зияющей пропастью или безликим пространством, подобным пустыне Гоби.


javascript c# jquery sharepoint-2010 invisible
person B. Clay Shannon    schedule 17.06.2015    source источник
comment
Приходите, чтобы пересмотреть мой код, я думаю, я мог бы упростить то, что мне нужно, если (this.checked)   -  person B. Clay Shannon    schedule 17.06.2015

Ответы (3)


arrow_upward
2
arrow_downward

есть несколько способов сделать это. но в вашей реализации jquery я бы украсил элементы тегами данных, которые сообщат коду, какие элементы скрывать и отображать.

<input data-group="1" type="text" />
<input data-group="2" type="text" />

var $group1 = $('*[data-group="1"]');
var $group2 = $('*[data-group="2"]');
if (ckd) {
  $group1.hide(); 
  $group2.show(); 
}
else{
 $group2.hide(); 
 $group1.show(); 
}

Вы можете сделать то же самое и с классами css, но я предпочитаю использовать атрибут данных

person QBM5    schedule 17.06.2015
comment
Все ответы правильные, но этот пока самый элегантный. +1 - person Adib Aroui; 17.06.2015
comment
Я большой поклонник атрибутов data, но рассмотрим следующий сценарий: один элемент управления принадлежит двум разным группам. Используя (несколько) классов, этот элемент может быть легко выбран, в то время как использование атрибутов data требует дополнительной логики. - person Andrei V; 17.06.2015
comment
Очень верно. единственная причина, по которой я предпочитаю использовать данные, это то, что классы технически являются частью элементов css, вы можете легко создать столько классов, отличных от css, сколько пожелаете, и использовать их по любой причине, которую вы хотите, но на самом деле это не то, что означают классы для (но я тоже иногда это делаю). При достаточно хорошей логике это можно сделать разными способами. - person QBM5; 17.06.2015
comment
@ QBM5, я полностью согласен. Вот для чего предназначены атрибуты data: дополнительные данные внутри HTML. - person Andrei V; 17.06.2015
comment
Мне это нравится, но пока не могу заставить это работать. Я задал дополнительный вопрос здесь: stackoverflow.com/questions/30899973/ - person B. Clay Shannon; 17.06.2015

arrow_upward
1
arrow_downward

Если вы можете сгруппировать свои элементы управления с помощью классов, вы можете выбрать класс, который необходимо скрыть в этом конкретном сценарии, и просто использовать функцию hide():

if (ckd) {
    var cls = getClassForCurrentScenario();
    $("." + cls).hide(); //slideUp() would be an animated alternative
}

Например, если элементы управления можно сгруппировать внутри div, вам просто нужно скрыть этот элемент:

if (ckd) {
    var id = getElementIdForCurrentScenario();
    $("#" + id).hide(); //slideUp() would be an animated alternative
}

Это действительно зависит от того, как вам удастся сгруппировать элементы управления в «целевые группы», чтобы вы могли эффективно получить к ним доступ позже.

person Andrei V    schedule 17.06.2015
comment
Также учтите, что hide() эквивалентно .css("display", "none"), поэтому, если вашему дизайну нужно, чтобы пространство, занимаемое элементом, все еще было доступно на странице, используйте .css("display", "hidden") - person Adib Aroui; 17.06.2015
comment
@whitelettersandblankspaces, хорошее замечание, хотя такое случается редко - person Andrei V; 17.06.2015

arrow_upward
0
arrow_downward

Вы можете скрыть элемент следующим образом:

$('...').hide();

Или вы можете сдвинуть его с помощью:

$('...').slideUp();

чтобы получить красивую скользящую анимацию.

Кстати, вы можете сделать это сразу с несколькими элементами, в вашем случае:

$('[id$=txtbxthis], [id$=txtbxthat], [id$=txtbxtheother]').slideUp();
person Wojciech Maj    schedule 17.06.2015
comment
Я проголосовал за это, чтобы вернуть его к 0, но хотел бы знать, почему кто-то его отверг. - person B. Clay Shannon; 17.06.2015
comment
Я предполагаю, что это был ленивый ответ, который давал очень базовые знания и предполагал, что сложная реализация не была частью исходного вопроса. Если кто-то хочет знать, как отображать и скрывать элементы с помощью jquery, есть миллионы способов найти этот ответ. Имея это в виду, кто-то, возможно, сделал предположение, что ОП также нужны подробности реализации, а не эти две строки без ответа :) - person QBM5; 17.06.2015