Question

我没有每次重写大量的代码，而是试图将功能合并到我的工作中，但是我无法使其工作。

基本上，我有一系列单选按钮，每次单击单选按钮时我都会执行一些操作。（我实际上正在加载一个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();
});

我确信这很简单，但我还在学习，所以很少有东西总是让我失望！

Answer 1

将themeName作为switchPreview函数的参数传递。

- 将函数的第一行改为：

jQuery.fn.switchPreview = function (themeName) {

- 对于你调用函数的三次中的每一次，请确保传入参数，即：

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

Answer 2

为什么不直接更新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上使用CLASS属性并使用它来访问它 - 如果你只是想引用一个对象，你真的需要考虑使用ID属性。（如上例所示）

创建可重用的jQuery函数

2 个答案: