jquery - 减少中继器上图像的不透明度

Question

我有一个中继器控件，每个项目模板都有一个图像和链接按钮。

我想要做的是当点击链接按钮时，除了与点击相关的图像之外的每个图像都变为 50% 的不透明度。

<asp:Repeater ID="Categories" runat="server" OnItemCommand="showSubCat_itemCommand">
    <HeaderTemplate></HeaderTemplate>
    <ItemTemplate>
       <div class="catListing">   
       <img class="RepeaterImage" src="/images/<%#Eval("imageUrl").ToString()  ?? "" %>"/>
       <asp:LinkButton ID="showSubCats" runat="server" text='<%# Eval("Name") %>' CommandArgument='<%# Eval("id") %>'/>   
       </div>
    </ItemTemplate>
    <FooterTemplate></FooterTemplate>
</asp:Repeater>

这是我的中继器，我希望这样的事情会起作用：

<script type="text/javascript">

$('[ID*="showSubCats"]').click(function () {
    debugger;
       $(".RepeaterImage").not(this).stop().animate({ opacity: 0.4 }, 300);
       $(this).stop().animate({ opacity: 1.0 }, 300);

    });
</script>

单击任何 showsubcats 链接按钮时没有任何反应。我猜我可能走错路了！

任何帮助都会很棒。

Answer 1

idhtml-markup 中的属性asp:LinkButton不会是showSubCats. 我建议你CssClass="showSubCats"在 上设置asp:LinkButton，然后使用这个 javscript：

<script type="text/javascript">

    $('.showSubCats').click(function () {

       $(".RepeaterImage").not(this).stop().animate({ opacity: 0.4 }, 300);
       $(this).stop().animate({ opacity: 1.0 }, 300);

    });
</script>