创建一个可重用的 jQuery 函数 [英] Creating a reusable jQuery function

问题描述

我不是每次都重新编写大量代码，而是尝试将函数合并到我的工作中，但我无法让它工作.

Instead of re-writing a massive block of code each time, I'm trying to incorporate functions into my work but I'm having trouble making it work.

基本上，我有一系列单选按钮，每次单击单选按钮时我都会执行一些操作.(我实际上正在加载一个 iFrame).但是，我需要为每个单选按钮设置不同的 iFrame SRC，那么我将如何在函数中满足这一点?

Basically, I've got a selection of radio buttons and I'm performing some stuff each time a radio button is clicked. (I'm actually loading an iFrame). However, I need to make the iFrame SRC different for each radio button so how would I cater for this within the function?

功能:

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 的变量.我需要这个以某种方式更改每个单选按钮.您可以在调用函数的代码中看到我每次都尝试声明变量，但这仍然给我一个未定义的错误.

Within the iFrame SRC I have a variable called themeName. I need this to somehow change for each radio button. You can see within the code that calls the function I've tried to declare the variable each time but this still gives me an undefined error.

调用它的代码:

$('#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();
});

我确信这是非常简单的事情，但我仍在学习，所以很少的东西总是让我失望！

I'm sure this is something very simple but I'm still learning so little things always throw me off!

推荐答案

将 themeName 作为 switchPreview 函数的参数传入.

Pass in the themeName as an argument of the switchPreview function.

-将函数的第一行改为:

-Change the first line of the function to:

jQuery.fn.switchPreview = function (themeName) {

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

-For each of the three times you are calling the function, make sure you are passing in the argument, i.e:

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

这篇关于创建一个可重用的 jQuery 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！