如何通过 jQuery 隐藏控件组？

Question

在我的 Sharepoint project/Web Part/Web 页面中，我在 *.ascx.cs 文件中使用 C# 动态创建页面 elements/controls。

在 *.ascx 文件中，我使用 jQuery 来响应页面上发生的事件（选择、复选框状态的更改等）。

我需要有条件地隐藏页面上的 controls/elements 组。具体来说，如果用户选中某个复选框，我可以 "remove" 整个页面，在那种情况下，不适用于她。

我该怎么做？我有这个起点：

/* 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?
    }
});

我可以用拔头发的方式来做（这对我来说会很痛苦，因为我的头发几乎和 Absalom 一样多），然后设置每个单独的元素，像这样：

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 
}

肯定还有更 elegant/better 的方法！

是将所有有条件的不可见元素分配给一个特定的 class，然后将分配给该 class 的每个元素隐藏起来还是什么？

另外，我希望这个现在看不见的条带以前使用的区域 "go away" 或 "roll up" 不会呆呆地呆呆地呆在那里，打哈欠的裂口，或像戈壁沙漠一样毫无特色的广阔区域。

Answer 1

您可以像这样隐藏一个元素：

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

或者您可以将其向上滑动：

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

获得漂亮的向上滑动动画。

附带说明一下，您可以一次对多个元素执行此操作，在您的情况下：

$('[id$=txtbxthis], [id$=txtbxthat], [id$=txtbxtheother]').slideUp();

Answer 2

如果您可以使用 classes 对控件进行分组，则可以 select 需要在该特定场景中隐藏的 class 并且只需使用 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
}

这实际上取决于您如何设法将控件分组到 "target groups"，以便您以后可以高效地访问它们。

Answer 3

有多种方法可以做到这一点。但在您的 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 类做同样的事情，但我更喜欢使用数据属性

如何通过 jQuery 隐藏控件组？

How can I invisiblize groups of controls via jQuery?

javascript

c#

jquery

invisible

sharepoint-2010