Telerik RadButton 与 JQuery

Question

我正在尝试使用 RadButton 和 JQuery 做一些相当简单的事情。我有一个带有 div、一个 radbutton 和一个内部 div 的中继器，当单击按钮时应该使用 JQuery .slideDown 或 .slideUp (inner_container)。我需要这只发生在被点击按钮的 outside_container 内的 div inner_container 上。

在中继器中，这些按钮和样式会重复，所以我需要一个特定的容器，否则它们都会打开和关闭。我无法让 .parents("outside_container").find("inner_container").slideDown() 工作，因为我似乎无法找到特定的 radbutton id 或者如果我确实使用 var button = sender.get_id(); jquery 函数 .parents() 不能用它吗？

我不知道如何上下滑动以与 RadButtons 一起使用。而且我无法切换到 asp:buttons，因为这是我正在更新的现有项目。

function ShowVoidDetail(sender, args) 
{
   var button = sender.get_id();

    $(button).parents(".event_is_void_container").find(".event_is_void").slideDown();
    sender.set_text("Hide Void Event");

    args.set_cancel(true);
 }

下面的aspx页面...

<asp:repeater>
<itemtemplate>
        <table>
    <tr>
        <td>
                     <div class="event_is_void_container">
                    <div class="buttons">
                        <rad:RadButton id="btnShowDetails" OnClientClicking="ShowDetail"/>
                    </div>

                    <div class="event_is_void"> /*this style is display:none by default*/
                        A bunch of data...
                    </div>
                <div>
            </td>
        </tr>
</itemtemplate>

Answer 1

如果您向按钮添加一个类，那么您可以将点击事件绑定到该类，然后使用this 元素仅操作被点击的按钮，就像这样

$('.expandButton').click(function () {
    $(this).parent().next().slideDown();
});

您的中继器代码如下所示：

   <asp:repeater>
   <itemtemplate>
           <table>
       <tr>
           <td>
                        <div class="event_is_void_container">
                       <div class="buttons">
                           <rad:RadButton id="btnShowDetails" 
                          OnClientClicking="ShowDetail" class="expandButton" />   
                       </div>

                       <div class="event_is_void"> /*this style is display:none by default*/
                           A bunch of data...
                       </div>
                   <div>
               </td>
           </tr>
   </itemtemplate>

这是一个例子http://jsfiddle.net/Z5s95/