jQuery：通過點擊變量創建可重複使用的函數

什麼是使下面的代碼可重用的正確方法是什麼（這樣我就不必每次都想要隱藏/顯示同一個函數的這麼多版本的DIV的組）：jQuery：通過點擊變量創建可重複使用的函數

// instructions 
$('#hideInstructionsOverview').click(function() { 
    $('#instructionsOverview').fadeOut(400, function() { 
     $('#instructionsDetail').fadeIn(400); 
    }); 
}); 

$('#hideInstructionsDetail').click(function() { 
    $('#instructionsDetail').fadeOut(400, function() { 
     $('#instructionsOverview').fadeIn(400); 
    }); 
}); 

// group 
$('#hideGroupOverview').click(function() { 
    $('#groupOverview').fadeOut(400, function() { 
     $('#groupDetail').fadeIn(400); 
    }); 
}); 

$('#hideGroupDetail').click(function() { 
    $('#groupDetail').fadeOut(400, function() { 
     $('#groupOverview').fadeIn(400); 
    }); 
});

上面的代碼被以相同的方式來隱藏「指令」和「基團」的div（並以相同的方式約7其它的div）使用。每一個被稱爲類似的方法是使用下面的代碼：

<a id="hideInstructionsOverview" href="javascript:void(0);"><img src="img/misc/plus.png" alt="" width="40" height="40" border="0"></a> 
<a id="hideInstructionsDetail" href="javascript:void(0);"><img src="img/misc/minus.png" alt="" width="40" height="40" border="0"></a> 

<a id="hideGroupOverview" href="javascript:void(0);"><img src="img/misc/plus.png" alt="" width="40" height="40" border="0"></a> 
<a id="hideGroupDetail" href="javascript:void(0);"><img src="img/misc/minus.png" alt="" width="40" height="40" border="0"></a>

我在想，有我可以創建一個接受變量函數的方式，而我通過上點擊三個變量：（1）被點擊了什麼樣的形象標識（我認爲這$this可能是使用），（2）什麼股利fadeOut和（3）什麼的div fadeIn。我似乎無法得到可變創造和傳遞正確的，但我想，最終，可重複使用的功能會是這個樣子：

// divToggler 
$('$this').click(function() { 
    $('#divToFadeOut').fadeOut(400, function() { 
     $('#divToFadeIn').fadeIn(400); 
    }); 
});

感謝這麼多提前！

Berklie

來源

2012-07-11 Berklie

你可以請張貼您的示例html的一些方面的div？ – Daedalus 2012-07-11 20:27:40

理想情況下，你會解決這個層次，而不是依靠大量的ID。這不是總是可能的，因爲你沒有發佈你的HTML結構，我只會回答這個問題。請注意，這使用ECMA 5的Object.keys()方法。這將需要在IE <修改使用= 8

var map = { 
    hideInstructionsOverview: {out: 'instructionsOverview', in: 'instructionsDetail'}, 
    hideInstructionsDetail: {out: 'instructionsDetail', in: 'instructionsOverview'} 
    /* etc... */ 
} 

$('#'+Object.keys(map).join(', #')).on('click', function() { 
    var thisMapEntry = map[$(this).attr('id')]; 
    $('#'+thisMapEntry.out).fadeOut(400, function() { 
     $('#'+thisMapEntry.in).fadeIn(400); 
    }); 
});

這可能與有關命名約定（其中出現的聲音，從您發佈的）一些假設來完成時間更短，但我不會冒這個險的。

來源

2012-07-11 20:34:54 Utkanos

美的東西......非常感謝你，它運作順暢。 – Berklie 2012-07-11 21:21:05

試一下這個（working example）：

function capitaliseFirstLetter(string) 
{ 
    return string.charAt(0).toUpperCase() + string.slice(1); 
} 

// Implementing: 
function elementsToggler(elements) 
{ 
    for (var i = 0; i < 2; i++) 
    { 
     $("#hide"+capitaliseFirstLetter(elements[i])).bind("click", { i: i }, function(e) 
     { 
      $("#"+elements[e.data.i]).fadeOut(400, function() 
      { 
       $("#"+elements[e.data.i === 0 ? 1 : 0]).fadeIn(400); 
      }); 
     }); 
    } 
} 

// Binding: 
elementsToggler(["instructionsOverview", "instructionsDetail"]); 
elementsToggler(["groupOverview", "groupDetail"]);

來源

2012-07-11 20:25:42 fedosov

我很感激。 – Berklie 2012-07-11 21:25:06

有你有：

function _setupClick(starterName, finalName){ 
    var initializer = $('#hide' + starterName.charAt(0).toUpperCase() + starterName.slice(1)); 
    var overview = $('#' + starterName); 
    var detail = $('#' + finalName); 
    initializer.click(function(){ 
     overview.fadeOut(400, function() { 
      detail.fadeIn(400); 
     }); 
    }); 
} 
function setupClick(name){ 
    _setupClick(name + 'Overview', name.toLowerCase() + 'Detail'); 
    _setupClick(name + 'Detail', name.toLowerCase() + 'Overview'); 
} 

setupClick('instructions'); 
setupClick('group');

來源

2012-07-11 20:38:11

我很感激。 – Berklie 2012-07-11 21:25:30

這樣做有

你可以嘗試把你想淡入如您點擊元素的屬性的DIV ID的方法很多，例如，使用您的當前設置

HTML

<a id="groupOverview" class="clickClass" rel="#groupOverview">link here</a>

$('.clickClass').click(function() { 
    var showThis = $(this).attr('rel'); 
    $('#' + $(this).attr('id').replace('hide', '')).fadeOut(400, function() { 
     $(showThis).fadeIn(400); 
    }); 
});

您也可以很容易地應用這種設置，並使用不同的命名約定。如果你有不同的div ID，那麼你可以隨時定義另一個屬性來獲取你需要的值。爲了使其更具可讀性，在這裏我已經通過線，而不是所有的一件事

$('.clickClass').click(function() { 
    // gets the id attribute of clicked element and replaces the hide string with nothing (removes it). This works only because you have setup your html this way 
    var hideThis = '#' + $(this).attr('id').replace('hide', ''); 

    // gets the rel which I have set to the id of the showing element 
    var showThis = $(this).attr('rel'); 

    $(hideThis).fadeOut(400, function() { 
     $(showThis).fadeIn(400); 
    }); 
});

我沒有時間做樣本，因爲我在工作，但如果事情沒有定義的JS線工作讓我知道，它應該是一個簡單的修復，但我認爲這個結構是最容易理解和實施

來源

2012-07-11 20:41:42 Huangism

我很感激。 – Berklie 2012-07-11 21:25:16

jQuery：通過點擊變量創建可重複使用的函數

回答

相關問題