創建可重用的jQuery函數

我不是每次都重寫大塊代碼，而是試圖將函數合併到我的工作中，但我無法使其工作。創建可重用的jQuery函數

基本上，我選擇了單選按鈕，每次點擊單選按鈕時我都會執行一些操作。（我實際上正在加載一個iFrame）。但是，我需要使每個單選按鈕的iFrame SRC都不同，因此如何在功能範圍內滿足此要求？

功能：

jQuery.fn.switchPreview = function() { 
$('.liveDemoFrame').remove(); 
$('.liveDemoHand').append('<iframe class="liveDemoFrame" src="themes/src/' + themeName + '/" width="100%" height="300" scrolling="no"><p>Your browser does not support iframes.</p></iframe>'); 
$('.liveDemoHand').append('<div class="switchPreview"><div class="loadingPreview"></div></div>'); 
$('.liveDemoFrame').load(function() { 
    $('.switchPreview').fadeOut(); 
    $('.switchPreview').remove(); 
    $('.liveDemoFrame').fadeIn(); 
}); 
return this; 
}

內IFRAME SRC我有一個名爲THEMENAME變量。我需要這個以某種方式改變每個單選按鈕。你可以在調用函數的代碼中看到我試圖每次都聲明變量，但這仍然給我一個未定義的錯誤。

調用它的代碼：

$('#cTheme1').click(function() { 
    $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
      var themeName = 'theme1'; 
      $('.liveDemoFrame').switchPreview(); 
}); 

$('#cTheme2').click(function() { 
    $('input:radio[name=mgChooseTheme]:nth(2)').attr('checked',true); 
      var themeName = 'theme2'; 
      $('.liveDemoFrame').switchPreview(); 
}); 

$('#cTheme3').click(function() { 
    $('input:radio[name=mgChooseTheme]:nth(3)').attr('checked',true); 
      var themeName = 'theme3'; 
      $('.liveDemoFrame').switchPreview(); 
});

我敢肯定，這是很簡單的東西，但我仍然在學習這麼一點東西總是拋出我了！

來源

2011-11-16 tctc91

也許使用jQuery中的data（）方法 - > http://api.jquery.com/jQuery.data/然後將單元格按鈕中的URL存儲爲數據？ – ManseUK

是的，非常簡單，只需將您的themeName變量傳遞到switchPreview（）方法即可。 – anson

你可以使用attr來改變iframe的src嗎？或者有什麼我失蹤？我張貼在JSFiddle上。 – Gordnfreeman

傳入themeName作爲switchPreview函數的參數。

- 改變函數的第一行：

jQuery.fn.switchPreview = function (themeName) {

- 對於每次調用的函數的三倍，確保您傳遞參數，即：

$('.liveDemoFrame').switchPreview(themeName);

來源

2011-11-16 14:46:08 robmisio

完美的作品。非常感謝。 – tctc91

爲什麼不更新的iframe的src標籤...

$('#cTheme1').click(function() { 
    $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
      $('#liveDemoFrame').attr('src', <the new url>); 
});

那麼你的iframe就已經需要在頁面的一部分：

<iframe id='liveDemoFrame' src='<default page>'></iframe>

我注意到您使用一類屬性放在你的iFrame上並使用它來訪問它 - 如果你只是想引用一個對象，你真的需要考慮使用ID屬性。（如上例所示）

來源

2011-11-16 14:43:54 ManseUK

創建可重用的jQuery函數

回答

相關問題