如何通過jQuery隱藏控件組？

Question

在我的Sharepoint項目/ Web部件/網頁中，我使用* .ascx.cs文件中的C＃動態創建頁面元素/控件。

在* .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 
}

當然有更優雅/更好的方式！

是將所有條件不可見的元素分配給一個特定的類，然后調用分配給該類的每個元素，或者是什么？

此外，我希望這個現在看不見的地帶以前使用過的區域“走開”或“卷起來”，不要坐在那里，只有一個空白的凝視，打哈欠的峽谷，或戈壁沙漠般的無邊無際的廣闊。

Answer 1

有很多方法可以做到這一點。 但是在你的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類做同樣的事情，但我更喜歡使用data屬性

Answer 2

如果可以使用類對控件進行分組，則可以選擇需要在該特定場景中隱藏的類，並使用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
}

這實際上取決於您如何設置將控件分組為“目標組”，以便您以后可以有效地訪問它們。

Answer 3

你可以像這樣隱藏一個元素：

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

或者你可以用以下方式向上滑動：

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

獲得一個很好的滑動動畫。

另外，在您的情況下，您可以同時對多個元素執行此操作：

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