Question

我是JQuery的新手......

每次单击一个按钮时，我都会切换DIV ...之前我会在每次添加另一个DIV（产品）时创建一组新的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

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>

感谢您的帮助！

Answer 1

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

<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>

现在您可以使用类选择器进行绑定，并将其与this组合以选择相关元素：

$(".button").click(function (e) {
    $(this).nextAll(".details:eq(0)").find(".product_details").slideToggle("slow");
    e.preventDefault();
});

this将是触发事件处理程序的特定按钮，从那里我们使用DOM遍历方法导航到具有details类的下一个兄弟元素，并从那里导航到具有product_details课程并切换它。

这是一个小提琴：http://jsfiddle.net/LfuWq/

Answer 2

您也可以使用：

$.fn.extend({ 

myFunction:function(){

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

});

然后打电话给它：

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

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

2 个答案: