将重复JQuery转换为可重用函数

我是JQuery的新手

每次单击按钮时，我都会切换一个DIV。。。以前，每次添加另一个DIV（product）时，我都会创建一组新的jquery代码。这个网站将使用内容管理系统，所以我需要把这个重复的代码变成一个功能

我正在重复的代码，用于在单击ID时切换DIV

        // Product Detail Toggle Buttons
        $("#xc25_button").click(function(e){ 
            $("#xc25_detail").find(".product_details").slideToggle("slow");
            e.preventDefault(); 
        });

        $("#xc27_button").click(function(e){ 
            $("#xc27_detail").find(".product_details").slideToggle("slow");
            e.preventDefault(); 
        }); 

我尝试编写一个函数，并使用以下内容传入“特定名称”：

        // Products Detail Toggle Function
        var productDetail = function(productId){
            $("#" + productId + "_button").click(function(e){ 
                $("#" + productId + "_detail").find(".product_details").slideToggle("slow");
                e.preventDefault(); 
            }); 
        }

两个问题——

代码有什么问题

如何为HTML中的每个实例激活productDetail（“值”）

HTML格式如下：

        <a href="#"><span id="xc25_button">More Details</span></a>
        <div class="clear"></div>
        <div id="xc25_detail">
                    <div class="product_details">
                    <p>Some Text</p>
                    </div>
        </div>

一些文本

---

谢谢大家的帮助

解决这个问题的最简单方法是向元素中添加类。例如：

<a href="#" class="button"><span id="xc25_button" >More Details</span></a>
<div class="clear"></div>
<div id="xc25_detail" class="details">
    <div class="product_details">
        <p>Some Text</p>
    </div>
</div>

此

将是触发事件处理程序的特定按钮，从那里我们使用DOM遍历方法导航到具有

详细信息

类的下一个同级元素，并从那里向下导航到具有

产品_详细信息

类的子元素并切换它

这里有一把小提琴：

您还可以使用：

$.fn.extend({ 

myFunction:function(){

    var $this=$(this); // WHATEVER CALLS THIS FUNCTION
}

});

那就叫它：

$('#el').myFunction();

---

嘿，Matt-谢谢你的快速回复，我希望我没有错误地实现，但是我似乎无法让代码正常工作——也在它自己的页面上发布，仍然无法正常工作。你能再检查一下，确保我没有无缘无故地转动轮子吗？是的，对不起。我没有注意到处理程序位于span上，而不是父级

。我会修好的，谢谢你，先生，就是这样。。。就我个人而言，情商（1）应该选择下一个细节实例，不是吗？对于这个例子来说，这并不重要，因为它为什么不抓住它呢？此外，在删除等式（0）时，此代码仍然有效。。。为什么要包括它？

$('#el').myFunction();