通过 jquery（asp.net gridview、radcombobox）在 dom 中查找并切换 div

Question

我在 asp.net 网格视图中使用 radcombobox。现在我想，如果用户 select 来自组合框的一个特殊值，toogle a divs 可见性。但是由于呈现的代码，我不知道我必须做什么。

这是呈现的代码：

<td>
    <div class="colColor DivInHere" style="margin-top:8px;margin-right:2px;display:inline-block;float:left;">Artikel</div>
    <div class="colColor" style="margin-top:7px;float:left;margin-left:28px;">
        <div id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel" class="RadComboBox RadComboBox_Metro" style="width:200px;margin-left:5px;">
            <table class="rcbFocused" style="border-width: 0px; border-collapse: collapse;" summary="combobox">
                <tbody>
                    <tr>
                        <td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
                            <input id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_Input" class="rcbInput radPreventDecorate" type="text" style="color:rgb(166, 204, 213);" value="Bitte wählen ..." name="ctl00$ContentPlaceHolder1$gvRechnungsposition$ctl02$rcbArtikel" autocomplete="off">
                        </td>
                        <td class="rcbArrowCell rcbArrowCellRight">
                            <a id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
                        </td>                   
                    </tr>
                </tbody>
            </table>
            <input id="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_gvRechnungsposition_ctl02_rcbArtikel_ClientState" autocomplete="off" value="{"logEntries":[],"value":"Benutzerdefiniert","text":"Benutzerdefiniert","enabled":true,"checkedIndices":[],"checkedItemsTextOverflows":false}">
        </div>
    </div>
    <div style="clear:both"></div>
</td>
<td>
    <div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;">
</td>

这是我渲染前的代码：

...    
<asp:TemplateField>
                        <ItemTemplate>
                            <div class="colColor DivInHere" style="margin-top:8px;margin-right:2px;display:inline-block;float:left;">Artikel</div>
                            <div class="colColor" style="margin-top:7px;float:left;margin-left:28px;">
                                <telerik:RadComboBox runat="server" ID="rcbArtikel" Width="200px" Skin="Metro" AllowCustomText="true"
                                    EmptyMessage="Bitte wählen ..." CloseDropDownOnBlur="true" LoadingMessage="... Ladevorgang ..."
                                    Filter="Contains" MarkFirstMatch="true" ForeColor="#a6ccd5" style="margin-left:5px;"
                                    DataTextField="ArtikelBeschreibung" DataValueField="ArtikelID" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
                                </telerik:RadComboBox>
                            </div>
                            <div style="clear:both"></div>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="ArtikelID" Visible="false"></asp:BoundField>
                    <asp:TemplateField>
                       <ItemTemplate>
                           <div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;">
                               Beschreibung <asp:TextBox ID="tbBenutzerdefiniert" runat="server" MaxLength="250" Text="0" Width="200px" CssClass="inputWhite"></asp:TextBox>
                           </div>
                       </ItemTemplate>
                    </asp:TemplateField>
...

我想，如果 rcbArtikel 触发 OnClientSelectedIndexChanged 来切换此 div：<div class="colColor in" style="margin-left:10px;margin-right:10px;display:none;"> 通过其 class .in

这是我的功能：

            function OnClientSelectedIndexChanged(sender, eventArgs) {
            var item = eventArgs.get_item();

            var selItem = item.get_text();
            if (selItem == "Benutzerdefiniert") {
                //$(".in").toggle();
                $(this).closest('td > tr > tbody > table > div > div > td').next('td').find('.in').show();
            };

        }

希望您能理解我的意图，感谢您的阅读

Answer 1

好的，我找到了适合我的解决方案。也许它可以帮助遇到类似问题的人：

主要问题是，我忘记从我的 radcombobox 中获取正确的 ID。我是这样做的：var currentId = '#' + $(sender).attr('_clientStateFieldID');

现在这是我的职能：

function OnClientSelectedIndexChanged(sender, eventArgs) {

            var item = eventArgs.get_item();
            var selItem = item.get_text();
            var currentId = '#' + $(sender).attr('_clientStateFieldID');

            if (selItem == "Benutzerdefiniert") {
                $(currentId).parent().parent().parent().next('td').find('div.in').toggle();
            } else {
                $(currentId).parent().parent().parent().next('td').find('div.in').hide();
            };

        }

同样，肯定有更好的解决方案！

通过 jquery（asp.net gridview、radcombobox）在 dom 中查找并切换 div

find and toggle div in dom via jquery (asp.net gridview, radcombobox)

asp.net

jquery

gridview

telerik

next