我怎样才能通过jQuery invisiblize控件组？ [英] How can I invisiblize groups of controls via jQuery?

问题描述

在我的SharePoint项目/ Web部件/网页，我动态地创建页面元素/使用C＃中的* .ascx.cs文件控制。

In my Sharepoint project/Web Part/Web Page, I dynamically create page elements/controls using C# in the *.ascx.cs file.

在* .ascx文件，我使用jQuery为应对在页面上发生的事件（选择，复选框状态等的变化）。

In the *.ascx file, I use jQuery for responding to events that happen on the page (selections, changes of checkbox states, etc.).

我有一个必要条件invisiblize在网页上的控件/元素组。具体地说，如果用户检查一定复选框，我可以删除，在该情况下，并不适用于她的页面的全幅

I have a need to conditionally invisiblize groups of controls/elements on the page. Specifically, if the user checks a certain checkbox, I can "remove" whole swaths of the page that, in that scenario, don't apply to her.

可以如何我做到这一点？我有这个出发点：

How can I do this? I've got this starting point:

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

我能做到这一点的头发拉出的方式（这将是对我来说很痛苦的，因为我作为押沙龙做了几乎同样多发），并设置每个单独的元素，像这样：

I could do it the hair-pulling-out way (which would be very painful for me, because I have almost as much hair as Absalom did), and set each individual element, like so:

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 
}

当然，还有一个更优雅/更好的办法！

Surely there's a more elegant/better way!

时它分配的所有条件不可见元素特定的类，然后invisiblizing分配的类，或者是每个元素的问题？

Is it a matter of assigning all the conditionally invisible elements a particular class, and then invisiblizing every element that is assigned that class, or what?

另外，我想以前使用的现在这个不可见大片以走开或卷起不是茫然地看着坐在那里，打呵欠的鸿沟，或区域戈壁滩一样无特色汪洋。

Also, I want the area formerly used by this now-invisible swath to "go away" or "roll up" not sit there with a blank stare, yawning chasm, or Gobi Desert-like featureless expanse.

推荐答案

有许多方法可以做到这一点。但在你的jQuery实现我会装点的数据标签将告诉代码哪些元素隐藏和显示的内容。

there are a number of ways to do this. but in your jquery implementation I would decorate the elements with data tags that will tell the code which elements to hide and show.

<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类同样的事情很好，但我更喜欢使用数据属性

You could do the same thing with css classes as well but I prefer using the data attribute

这篇关于我怎样才能通过jQuery invisiblize控件组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！