传递参数

Question

我现在用的是下面这段jQuery代码重用jQuery的准备代码：

$('div#addMenu1').click(function(){ 
    if (!menuSet1){ 
     menuSet1 = true; 
        $('div#sliderOne').slideDown('slow'); 
        $('img', this).attr('src', 'Green_Up.png'); 
        $('img', this).attr('title', 'Collapse'); 
        $('div#sliderOne').css("background-color", "#cee8ff"); 
    } 
    else { 
     menuSet1 = false; 
        $('div#sliderOne').slideUp('slow'); 
        $('img', this).attr('src', 'Green_Down.png'); 
        $('img', this).attr('title', 'Create a top menu item'); 
    } 
}); 

的事情是，虽然，我想重用的代码相同的位，但能也检查DIV #addMenu [1234]以及设置menuSet [1234]并更改img标题

任何想法如何重用此代码，但基于用户点击的div部分，传递节号，如3和新标题对于img，这个代码，所以它会使用：

 $('div#addMenu3').click(function(){ 
    if (!menuSet1){ 
     menuSet3 = true; 
        $('div#sliderOne').slideDown('slow'); 
        $('img', this).attr('src', 'Green_Up.png'); 
        $('img', this).attr('title', 'Collapse'); 
        $('div#sliderOne').css("background-color", "#cee8ff"); 
    } 
    else { 
     menuSet3 = false; 
        $('div#sliderOne').slideUp('slow'); 
        $('img', this).attr('src', 'Green_Down.png'); 
        $('img', this).attr('title', 'Create a Level 3 menu item'); 
    } 
}); 

希望这是有道理的。

谢谢。 Tony。

Answer 1

我不确定这是否涵盖了您的问题的范围，但jQuery UI提供了一个accordion control，它涵盖了您似乎想要做的事情。

Answer 2

您可以将数据传递到事件处理程序，如果你使用bind（）的味道... http://docs.jquery.com/Events/bind

Answer 3

你可以掀起一个小插件。由于它是“空气编码”，因此可能存在问题。

$.fn.dropper = function(args) { 
// some default options - extended by args 
var opts = $.extend({ 
    sliderElem: null, 
    sliderBg: '#cee8ff', 
    imgOpen: 'Green_Up.png', 
    imgClosed: 'Green_Down.png', 
    titleOpen: 'Collapse', 
    titleClosed: 'Open', 
    openClass: 'open',  
}, args); 

this.click(function() { 
    // using a "hasClass" instead of your boolean logic 
    if ($(this).hasClass(opts.openClass)) { 
    $(this).removeClass(opts.openClass); 

    // the opts will be passed in when you call the plugin 
    $(opts.sliderElem).slideUp('slow'); 
    $('img', this).attr('src', opts.imgClosed).attr('title', opts.titleClosed); 
    } else { 
    $(this).addClass(opts.openClass); 

    $(opts.sliderElem).slideDown('slow').css('background-color', opts.sliderBg);   
    $('img', this).attr('src', opts.imgOpen).attr('title', opts.titleOpen); 
    } 
}); 
return this; 
} 


$('div#addMenu1').dropper({sliderElem: 'div#sliderOne'}); 
$('div#addMenu3').dropper({sliderElem: 'div#sliderThree', titleClosed: 'Create a Level 3 menu Item'});